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

Alexandra Velez
seal-mask
.a{fill-rule:evenodd;}techdegree
Alexandra Velez
Front End Web Development Techdegree Student 9,313 Points
Posted by Alexandra Velez
.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
STAFF
.a{fill-rule:evenodd;}techdegree seal-36
Rohald van Merode
Treehouse Staff
Rohald van Merode
.a{fill-rule:evenodd;}techdegree seal-36
Rohald van Merode
Treehouse Staff

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
Alexandra Velez
.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
Treehouse Staff
Rohald van Merode
.a{fill-rule:evenodd;}techdegree seal-36
Rohald van Merode
Treehouse Staff

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