Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Sass Basics Improve Your Workflow with Sass Write Nested Selectors

Qamar Ramzan
Qamar Ramzan
9,786 Points
Posted by Qamar Ramzan
Qamar Ramzan
9,786 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,940 Points
Mike Hatch
Mike Hatch
14,940 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
9,786 Points
Qamar Ramzan
Qamar Ramzan
9,786 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; }

}