title: Nesting class with SASS
body: <p>I have the following CSS/SASS.</p>
  
  <pre><code>.socialMedia__button{
      display:block;
      text-align:center;
      padding:10px;
      border: 2px solid;
      border-radius: 5px;
      color:#fff;
      width:100%;
      .facebook {
          background:#3c5b99;
      }
      .twitter {
          background:#429aff;
      }
  }
  </code></pre>
  
  <p>The HTML is: </p>
  
  <pre><code>&lt;p&gt;
    &lt;a href="#" class="socialMedia__button facebook"&gt;Sign up with Facebook&lt;/a&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p>However, my HTML doesn't seem to recognise the <code>facebook</code> part. Why is this?</p>
  
  <p>Thank you</p>