Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Sass Basics Improve Your Workflow with Sass Practice Extending a Selector

Brian Gilbank
Brian Gilbank
9,586 Points
Posted by 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,028 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,028 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
Brian Gilbank
Brian Gilbank
9,586 Points

Still not getting it. ugh.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,028 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,028 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
Brian Gilbank
Brian Gilbank
9,586 Points

I was over thinking it. Thanks.