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.

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


  .button {
  font-size:1.5em;
  }
}
 .icn {
  font-size:1.25em;
      &-success {
  color:green;
  }

 }
 &-warning {
 color:red;
   }

1 Answer

You're close - since this one is under .icn also, you're basically doing the same thing you did with .icn-success. The .icn selector should look something like this:

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

thanks ey