Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Posted by Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Why is this not working?

.bar {
    padding: 20px 0px;

    @include modifier(lightBrown) {
        background-color: $color-hedingar;
        color: red;
    }
}

The modifier works, but it wont get the padding, why? it works for the navigation bar, but not this.

the mixins are finre 

// BEM selectors
@mixin element($element) {
    &__#{$element} {
    @content;
  }
}
@mixin modifier($modifier) {
    &--#{$modifier} {
    @content;
  }
}

and html

 <div class="bar--lightBrown">
            s
        </div>

1 Answer

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

So, typically when using BEM, you should be adding both the base class and the modifer class to the element, so your HTML has to be:

<div class="bar bar--lightBrown">
    s
</div>
Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

You don't need to do that when Using Sass if you look how it looks : p The bar--lightBrown has all the classes that the bar has, from extending the class etc.. the power of Sass. Even Guil teaches that. But maybe i went soomewhere wrong in the code..

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

@extend is different. And if you use the ampersand in a nested selector in Sass, it replaces it with the parent selector(s).

So because the mixin uses the ampersand directly before the double underscores or hyphens, the mixin will output a class selector starting with .bar, but at the same level as the .bar class. THAT is the power of Sass.

That's the whole point of BEM, that you have a bunch of classes all at the root level instead of descendent selectors everywhere competing for specificity.

Trust me, I've been using the same format all throughout a recent project I've been working on in my web development job.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

It's not that I don't trust you, but the code you wrote seems to contradict on what Guil have showed on his Sass tutorial.

Well, I'm still trying to get my head around this. I see how this aproach will go, and ill show the site im doing.

DO you have projects I could have a look at, that I coudl learn frmo? :D