CSS Sass Basics Improve Your Workflow with Sass Write Nested Selectors

Alexandra Velez
seal-mask
.a{fill-rule:evenodd;}techdegree
Alexandra Velez
Front End Web Development Techdegree Student 9,313 Points

Why isn't it accepting the color red for the .icn-warning?

I specified the color red. It appears to be nested correctly.

Where's the issue in the code?

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

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

    }

   &-warning {
     color:red;
   }

}

2 Answers

Rohald van Merode
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Rohald van Merode
Front End Web Development Techdegree Graduate 23,916 Points

Hi Alexandra,

You're very close to the right answer. It looks like something went wrong inbetween the tasks with the nesting.

  • The .icn class is supposed to be at root level. In your code it's nested inside .banner.
  • The "color: green" is supposed to be inside the .icn-success class.

If you solve those two things it will be fixed :)

.banner {
  padding: 1em;
  background-color: lightgrey;
  .button { 
    font-size: 1.5em;
  }
}
.icn {
  font-size: 1.25em;
  &-success {
    color: green;
  }
  &-warning {
    color: red;
  }
}
Alexandra Velez
seal-mask
.a{fill-rule:evenodd;}techdegree
Alexandra Velez
Front End Web Development Techdegree Student 9,313 Points

I am confused by what's meant by root level. When I read root, I associate it with the root pseudo class.

In the context of SASS, what does root mean?

Rohald van Merode
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Rohald van Merode
Front End Web Development Techdegree Graduate 23,916 Points

Hi Alexandra,

Root-level in computing is the top level directory. You can see it as a tree where the root is the starting point of the structure that will grow further with branches and leafs.

So in this example the css/sass file itself is the root. You got different rulesets in there (.banner and .icn) and in those are the nested selectors (.button, &-success and &-warning).

.icn in the root basically means it stands on it own and isn’t nested inside another ruleset.

I hope this cleared it up for you