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
Steve Monsen
5,207 PointsProblem with Sass > Extending Selectors challenge
Question: Style the class ".animals" to have a background of #369. Use "extend" to apply those styles to a new class, ".dogs".
My Answer:
/* Write your SCSS code below. */
%animals {
background-color: #369;
}
.dogs {
@extend %animals;
}
Response: "Bummer! The .animals div should have a background-color of #369. Did you set up the .animals class correctly?"
I've tried changing the background shorthand to the more explicit background-color: to no avail. Also, the preview shows that the code works as the background for .dogs is indeed blue/#369 when refreshed.
4 Answers
Dylan George
1,293 PointsThis is the correct answer:
%animals { background-color: #369; }
.animals { @extend %animals; } .dogs { @extend %animals; }
Giovanni CELESTE
20,961 PointsHi Steve, Why did you use % for defining you class animals? Did you try to write it .animals instead?
EDIT: ok I see now why you did it that way, quite confusing I admit. Placeholder (%animals) is used for extending, the %animals won't be rendered, but in the html file you need it for the .animals div. It would work if you want to display the .dogs div only, but in this case they want you to display the .animals div too (check it with the preview, you'll see the difference).
Steve Monsen
5,207 PointsThanks for the clarification. Yeah, I totally ignored the html source and was thinking in terms of the old object-oriented programming examples: a dog and a fish are both animals, so we define basic characteristics and traits of animals, then extend animals w/ dogs and fish, etc.
But when you actually pay attention to the classes in the html file like you did it makes more sense :)
Steve Monsen
5,207 PointsOh, that's right. I was getting ahead of myself and trying to use the placeholder feature w/ %. Thanks for the heads up!
Aaron Witherspoon
9,911 PointsHi, I'm having an issue with this as well...
.animals {
backgound-color: #369;
}
.dogs {
@extend .animals;
}
I can't figure out why this is not working??
Any help is appreciated.
Giovanni CELESTE
20,961 PointsYou mispelled "background-color". :)
Aaron Witherspoon
9,911 PointsOH MAN... That's what I get for taking classes late at night.... and here I was stumped, trying to figure out why that wouldn't work.... Sheesh!
Thanks a bunch
Giovanni CELESTE
20,961 PointsI edited my previous answer.