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 trialAlexandra Velez
Front End Web Development Techdegree Student 9,313 PointsWhy 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?
.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
Treehouse StaffHi 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
Front End Web Development Techdegree Student 9,313 PointsI 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
Treehouse StaffHi 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