CSS Sass Basics Improve Your Workflow with Sass Write Nested Selectors

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

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.

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'.

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.

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

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