CSS Sass Basics Improve Your Workflow with Sass Write Nested Selectors

Use the & symbol to create the selector .icn-warning. Set the color of .icn-warning to red.

Use the & symbol to create the selector .icn-warning. Set the color of .icn-warning to red.

.banner { padding: 1em; background-color: lightgrey; .button { font-size: 1.5em; } } .icn { font-size:1.25em;

&-success{ color:green;

&-warning{ color:red; }

} }

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

&-success{
color:green;

&-warning{
color:red;
}

}
}

3 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! You're really close here, so I'm going to give a big hint. Check your closed curly braces. You've nested the &-warning inside the &-success. This means that the generated Sass will have a rule for .icn-success-warning instead of .icn-warning. I ran this through Sassmeister and take a look at the generated CSS:

.banner {
  padding: 1em;
  background-color: lightgrey;
}
.banner .button {
  font-size: 1.5em;
}

.icn {
  font-size: 1.25em;
}
.icn-success {
  color: green;
}
.icn-success-warning {
  color: red;
}

What the challenge is shooting for is an .icn rule, an .icn-success rule, and an icn-warning rule. Hope this helps, but let me know if you're still stuck! :sparkles:

I'm Struck, can you please help me?

.banner { padding: 1em; background-color: lightgrey;

.button { font-size: 1.5em; }

.icn { font-size: 1.25em;

&-success {
 color: green;

} &-warning { color: red; } }

}

Thank you - I got it, 2 separate rules!!! Yay!!! So happy!!!