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 Shane Keulen
Shane Keulen
1,537 Points

Code Challenge suffix naming

I'm trying to do the code challenge and this should work i think

%base { width :100%; } %element {@extend %base; background-color: blue; } %modifier { @extend %element; background-color: orange; border-color:red; }

.base { @extend %base; &__element { @extend %element; &--modifier { @extend %modifier; } } }

Also I can't copy back in the threehouse site....Really annoying trying to work alongside sassmeister

here is the gist : http://sassmeister.com/gist/318a0ff1737fab959148

4 Answers

Simon Klit
Simon Klit
1,686 Points

Hi Shane,

You have some unnecessary @extend's in some of your placeholders:

%base { width :100%; }
%element { @extend %base; background-color: blue; }
%modifier { @extend %element; background-color: orange; border-color:red; }

If you remove these, you get:

%base { width :100%; }
%element { background-color: blue; }
%modifier { background-color: orange; border-color:red; }

.base { 
  @extend %base; 
  &__element {
    @extend %element;
    &--modifier {
      @extend %modifier;
    }
  }
}

Which works as intended. :)

Shane Keulen
Shane Keulen
1,537 Points
Shane Keulen
Shane Keulen
1,537 Points

Hi sorry but I put you code in sassmeister and it doesn't provide the same functionality that mine does.

yours outputs:

.base {
  width: 100%;
}

.base__element {
  background-color: blue;
}

.base__element--modifier {
  background-color: orange;
  border-color: red;
}

The elements and modified classes don't inherit the styles of their "namespace parents" (i don't know what these should be called)

.base__element--modifier, .base__element, .base {
  width: 100%;
}

.base__element--modifier, .base__element {
  background-color: blue;
}

.base__element--modifier {
  background-color: orange;
  border-color: red;
}

Is what is expected is it not? You want the element to inherit bases styles and modifier to inherit both base and element.

Simon Klit
Simon Klit
1,686 Points

Hi Shane,

The output that my code spits out is what is expected in the code challenge. Try putting in it, it should very well be correct :)

The following is copied directly from the code challenge:

Use the given placeholder selectors along with parent selector references in order to get this CSS output:

.base {
  width: 100%; 
}

.base__element {
  background-color: blue;
}

.base__element--modifier {
  background-color: orange;
  border-color: red; 
}
Shane Keulen
Shane Keulen
1,537 Points
Shane Keulen
Shane Keulen
1,537 Points

Ah my mistake. Hmm that's interesting then. The code challenge is using extends but not actually taking advantage of the reason that extends exist, which is to create a comma separated selector with common styles in your output css.

Antonio Jaramillo
Antonio Jaramillo
15,604 Points
Antonio Jaramillo
Antonio Jaramillo
15,604 Points

Great thread. I think that this code challenge should come after the final video.