CSS Sass Basics Improve Your Workflow with Sass Write Nested Selectors

Arcel Derosena
seal-mask
.a{fill-rule:evenodd;}techdegree
Arcel Derosena
Front End Web Development Techdegree Student 4,789 Points

Why is it still wrong when I type the ampersand symbol?

When I type &-success { color: green; } there's a red line underneath and it's still wrong. Can anybody figure this out?

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

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

1 Answer

Brandon White
seal-mask
MOD
.a{fill-rule:evenodd;}techdegree seal-36
Brandon White
Treehouse Moderator

Hi Arcel,

The .icn-success is meant to be a nested selector, so that Sass knows what to add "-succecss" to. Try writing your code so that it looks like mine below (you'll notice how I'm nesting -success inside the .icn rule).

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

Also, based on the code presented, you never close your .banner rule. Make sure you have that second closing parenthesis after the .button rule.