title: How to vertically center a div with sass (compass)?
body: <p>Well, everything is in the question...
  I'm working on a login form that I would like to align vertically at the center of the body.
  I'm new to sass and compass, and I struggle to use the right mixin for this...</p>
  
  <p>The html code is pretty simple:</p>
  
  <pre><code>&lt;body&gt;
     &lt;div&gt;
         A div of unknown height to be vertically centered.
     &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>This is the CSS3 code that would make it work:</p>
  
  <pre><code> &lt;style&gt;
      html{
        height:100%;
      }
      body{
        height:100%;
        display:flex; 
        align-items:center;
        /* I spared all the compatibility properties for the different browsers */
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>___EDIT :</p>
  
  <p>I came up to something like this, but I realized I misunderstood the way to use the parent selector with SASS:</p>
  
  <pre><code>div.ieVerticalCentered {
      body.verticalCentering &amp; {
          height:100%;    
          display:-ms-flexbox;
          display:-moz-box;
          display:-webkit-box;
          display:-webkit-flex;
          display:flex;       
          -ms-align-items:center;
          -moz-align-items:center;
          -webkit-align-items:center;
          align-items:center;
              html.verticalCentering &amp; {
              height:100%;
          }
      }
  }
  </code></pre>
  
  <p>Therefore, the core question is: is it possible to apply a specific style to a parent element when a child element has a specific class.</p>
  
  <p>In my knowledge, it's not possible with static CSS, but could be done with JS. Having just discovered Sass, I was wondering if something nice could be considered...</p>