CSS Sass Basics Improve Your Workflow with Sass Write Nested Selectors

sass basics

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

Dan Weru
Dan Weru
47,637 Points

Hello Jessica, you were doing great. There was just a small syntax error after the .icn-success rule. Your forgot to close with a closing curly brace } right after the rule.

Your code ought to have been as follows

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