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 trialLyric Abbott
35,595 Pointswhat does this mean
Next, use a parent selector reference to create a modifier class for the active variation of .menu__link. Set the color to red.
my code:
&__active { color: red; }
http://teamtreehouse.com/library/modular-css-with-sass/sass-and-bem/bem-challenge
Lyric Abbott
35,595 Points@ryorke it didnt work
rayorke
27,709 PointsYou were unable to post your code? Would you be able to explain the issue a bit more?
2 Answers
Chris Shaw
26,676 PointsHi Lyric,
Let's break this down a little bit as BEM can be confusing if you're still new to it.
-
B - Block, the base class for the module, i.e
.base
-
E - Element, the element or child to the base class, i.e
.base__element
-
M - Modifier, the modifier either for the parent or child, i.e
.base--modifier
or.base__element--modifier
The challenge is asking you to use the parent &
selector and create a modifier class that extends from the .menu__link
selector, so based on the above how do we do that in Sass?
.base {
// Base styles here...
&__element {
// Element styles here...
&--modifier {
// Element modifier styles here...
}
}
&--modifier {
// Parent modifier styles...
}
}
Let me know if that's still confusing but it should give you a clearer idea of what the challenge is expecting.
Lyric Abbott
35,595 Pointsi know which one to use i just dont know what to put after it
Chris Shaw
26,676 PointsThe challenge tells you, it asks you to create an active
variation, what you have in your original post is almost correct which is why I posted the above.
Sergio Andrés Herrera Velásquez
Courses Plus Student 23,765 PointsThank you, this was very refreshing and finally allowed me to pass the 2nd part of the challenge
james white
78,399 PointsSorry Chris, but your "hint" was just too subtle for me. I had to play around for over an hour before I got:
.menu {
margin: 1em 0;
&__link {
color: blue;
padding: .5em;
&--active { color: red; }
}
}
The "blue" code comes from this helpful thread:
rayorke
27,709 Pointsrayorke
27,709 PointsHi Lyric!
It's helpful when you submit a question to show the example code that isn't working for you. There is a Markdown Cheatsheet link bellow the text entry field.
So your code would look something like this:
This will greatly help us to evaluate the code that you are asking for assistance with.