CSS Sass Basics Improve Your Workflow with Sass Write Nested Selectors

Qamar Ramzan
Qamar Ramzan
4,952 Points

Ampersand in the scss code in the nesting test is not working for me!

When I add the '&' it greys out in the screen. So really not sure where I'm going wrong?

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

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


}

2 Answers

Mike Hatch
Mike Hatch
14,939 Points

Since .icn-success is a child of .icn you omit .icn from your code. If you do that, it should pass.

From CSS Tricks:

The & always refers to the parent selector when nesting. Think of the & as being removed and replaced with the parent selector.

Qamar Ramzan
Qamar Ramzan
4,952 Points

Hi Mike,

Thanks for the reply.

I went back to try and this worked. But its weired because I'm sure i tried this and it failed. Anyway Thanks for helping.

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

}