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

Posted by Lyric Abbott
Lyric Abbott
35,595 Points

what 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

rayorke
rayorke
27,709 Points

Hi 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:

body {
    color: #FFFFFF;
    margin: 0;
    padding: 10px;
}

This will greatly help us to evaluate the code that you are asking for assistance with.

Lyric Abbott
Lyric Abbott
35,595 Points

@ryorke it didnt work

rayorke
rayorke
27,709 Points

You were unable to post your code? Would you be able to explain the issue a bit more?

2 Answers

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

Hi 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
Lyric Abbott
35,595 Points

i know which one to use i just dont know what to put after it

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

The 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
Sergio Andrés Herrera Velásquez
Courses Plus Student 23,765 Points

Thank you, this was very refreshing and finally allowed me to pass the 2nd part of the challenge

james white
james white
78,399 Points
james white
james white
78,399 Points

Sorry 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:

https://teamtreehouse.com/forum/help-156