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

Mladen Ignjatovic
Mladen Ignjatovic
13,602 Points
Posted by Mladen Ignjatovic
Mladen Ignjatovic
13,602 Points

SASS Problem

Elements with the @extends are now located on the top of the style sheet file. Why?

1 Answer

Gordon Naldrett
Gordon Naldrett
12,142 Points
Gordon Naldrett
Gordon Naldrett
12,142 Points

Extends are added in the cascade where the placeholder or extended selector itself is created in your scss file, from my understanding. So if you have a %my-extend-class defined at the top of your scss file and use it to extend a selector at the bottom of the document, it will appear at the top where the extend was declared. It can be quite confusing, I agree. If you need more control of where your code is placed within the final css you are probably better using a mixin to set your values. The other tip I picked up from the Sass courses on here that has helped with a more predictive output is to make sure you aren't extending a core selector like an h1 or p etc, your better using a placeholder.