Nesting class with SASS

Question

I have the following CSS/SASS.

.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;
    }
}

The HTML is:

<p>
  <a href="#" class="socialMedia__button facebook">Sign up with Facebook</a>
</p>

However, my HTML doesn't seem to recognise the facebook part. Why is this?

Thank you

1

Sorry I missed the SASS part – human Nov 13 '14 at 16:37

score 6 · Accepted Answer · answered Nov 13 '14 at 16:35

Your SASS will compile to this:

.socialMedia__button .facebook

But you actually want this:

.socialMedia__button.facebook

Try this SASS instead:

.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;
    }
}

score 1 · Answer 2 · answered Nov 13 '14 at 16:37

...
&.facebook {
   background:#3c5b99;
}
&.twitter {
   background:#429aff;
}
...

With your code, you are refering to an element .facebook INSIDE an element .socialMedia__button

If you want to refer the SAME element with 2 classes, you need to use "&."

Hope it helps

Nesting class with SASS

2 Answers2