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 Sass Basics Improve Your Workflow with Sass Practice Extending a Selector

Brian Gilbank
Brian Gilbank
9,586 Points

Can't get passed this Sass question!

Finally, create a new rule that targets the class .message-box. Make sure all <p> tags nested inside .message-box extend the properties of %warning.

It keeps saying I didn't include the color red for p?

style.scss
.roundy {
width: 150px;
border-radius: 50%; }

.img-author {
@extend .roundy;
%warning {
font-weight: bold;
color: red; }
}

 .message-box {
 p {
 @extend %warning; 
 } 
}

2 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,252 Points

What#s happening is you're nesting your placeholder selector inside extend directive for .roundy. Just put that in it's own code block separate to anything else and you should be good to go! :)

Brian Gilbank
Brian Gilbank
9,586 Points

Still not getting it. ugh.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

Okay.

First of all, you start by creating 1 selector and another that extends that selector, passing the values from one, into another so they both use those styles.

.roundy {
width: 150px;
border-radius: 50%; }

.img-author {
@extend .roundy;
}

In the next challenge, you create a new placeholder selector with its own styles. It will exist in global space so not nested inside another selector.

%warning {
  font-weight: bold;
  color: red;
}

Finally, in a new selector, with a nested paragraph selector you need to use @extend one more time to pass the values inside the %warning placeholder inside message box.

.message-box {
     p {
     @extend %warning;
  }
}

Good luck :)

Brian Gilbank
Brian Gilbank
9,586 Points

I was over thinking it. Thanks.