CSS Sass Basics Improve Your Workflow with Sass Write Nested Selectors

Rodrigo Salles
Rodrigo Salles
12,883 Points

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

My code it's wrong?

style.scss
.banner {

  .button {
    font-size: 1.5em
  }

  padding: 1em;
  background-color: lightgrey;
}

.icn {
  font-size:1.25em;

  &.icn-success {
    color:green;
   }
}

2 Answers

Tim Knight
Tim Knight
28,861 Points

Hi Rodrigo—

You're really close on this one. Take a look at the question again, they're looking for you to use & to have the class .icn-success. So you'd want to do something like &-success so the .icn will get pulled from the top of the nest.

Vipin Singh
Vipin Singh
15,265 Points

Here i have solve the problem

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

  .button {
    font-size: 1.5em;
  }

  .icn {
    font-size: 1.25em;

    &-success {
     color: green;
   }
  }

}

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

.button { font-size: 1.5em; }

.icn { font-size: 1.25em;

&-success {
 color: green;

} &-warning { color: red; } }

}