CSS Sass Basics Improve Your Workflow with Sass Write Nested Selectors

Elliot Holbrow
PRO
Elliot Holbrow
Pro Student 1,248 Points

Incorrect color value? how?

I'm stumped here haha.

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

3 Answers

Linas Mackonis
Linas Mackonis
7,060 Points

Hi Elliot, Try to use indentation, because .icn-succes is a nested selector. It should be indented with one more tab space into the .icn class.

Here is my solution:

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

On the right track. Just move your &- part into the the .icn class (so it'd reference the .icn class, not .button.

Elliot Holbrow
PRO
Elliot Holbrow
Pro Student 1,248 Points

Thanks guys, I used an SCSS validator called SassMeister to help me through this.