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 Write Nested Selectors

Posted by Macmillan Makore
Macmillan Makore
10,167 Points

Next, use the & symbol to create the selector .icn-success. Set the color of .icn-success to green.

I need some help here. Im in a cloud of confusion

style.scss 
.banner {
  .button{
  font-size:1.5em;}
  padding: 1em;
  background-color: lightgrey;
}
.icn{
font-size:1.25em
}
&:.icn-success {
  color: green;
}
.icn-success-warning {
  color: red;
}

2 Answers

Unsubscribed User
Unsubscribed User
8,900 Points
Unsubscribed User
Unsubscribed User
8,900 Points

Hello Macmillan,

Double check the new selector you are trying to create. First, the location of your new selector is in the wrong place. You will want to make sure to place this modifier class inside of the main class. Second, make sure to check the way you are naming you this new modifier class as you currently have more information included than is needed in SCSS.

For example: Say I have these classes, .example and .example-color, Using SCSS you will want to modify your code to look something like this

.example {
  &-color {}
}

Check out some additional examples here!

Hope this helps, Good luck!

Matt R.

Macmillan Makore
Macmillan Makore
10,167 Points

Hey Matt. Thanks for the help hey. I hope im not a bother. One more question, i have tried what you gave me and it gave this bummer!! Bummer! Make sure you're using a nested selector and an '&' to define '.icn-success'.

Unsubscribed User
Unsubscribed User
8,900 Points

Hey, not a problem!

Did you make sure to move that selector within the main .icn class? In your example, you have placed it outside of the main class. It should come directly after the font-size of .icn. Make sense? Also, before you were using &:.icn-success You'll want to make sure you are only using &-success and to remove the :.icn

If you have any more questions or issues just let me know!

Good luck! Matt R.

Macmillan Makore
Macmillan Makore
10,167 Points
Macmillan Makore
Macmillan Makore
10,167 Points

Thanks mate. I finally grasped it from your explanation. Genius answer

Unsubscribed User
Unsubscribed User
8,900 Points

Great! I'm glad you got it working. Good luck with the rest of the course!