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
Sahou Kanaan Almelhem
Courses Plus Student 15,547 PointsSASS cross-media extensions
Sass does not allow cross-media extensions, because it outputs invalid CSS and extends rules from another scope. What does that mean ?
3 Answers
Jacob Mishkin
23,118 PointsWhat it means is you can not do the following:
%example {
color: blue;
font-weight: bold;
font-size: 2em;
}
@media (max-width: 800px) {
.generic-class {
@extend %example;
}
}
By the example, you can not extend into a media query. Extends moves CSS selectors and not rules. The Issues stems from preserving the source order.
Sahou Kanaan Almelhem
Courses Plus Student 15,547 Pointsthanks for answer, but can you explain please what does "extends rules from another scope" mean ?
Jacob Mishkin
23,118 PointsIn Sass nesting is scoping much like media queries in vanilla-CSS.
By looking at the example above we can see that %example is set to the global scope of the style sheet where as .generic-class is scoped to the media query and inside the media query you are scoping %example to .generic-class. The output of the Sass becomes invalid CSS. Hence cross-media extensions are invalid.
Sahou Kanaan Almelhem
Courses Plus Student 15,547 PointsThanks a lot Jacob Mishkin
Jacob Mishkin
23,118 PointsNot a problem, I hope it helps.