css - Extending selectors from within media queries with Sass -

css - Extending selectors from within media queries with Sass -

i have item class , compact "modifier" class:

.item { ... } .item.compact { /* styles create .item smaller */ }

this fine. however, i'd add together @media query forces .item class compact when screen little enough.

on first thought, tried do:

.item { ... } .item.compact { ... } @media (max-width: 600px) { .item { @extend .item.compact; } }

but generates next error:

you may not @extend outer selector within @media. may @extend selectors within same directive.

how accomplish using sass without having resort copy/pasting styles?

the simple reply is: can't because sass can't (or won't) compose selector it. can't within of media query , extend that's outside of media query. nice if take re-create of instead of trying compose selectors. doesn't can't.

use mixin

if have case you're going reusing block of code within , outside of media queries , still want able extend it, write both mixin , extend class:

@mixin foo { // stuff } %foo { @include foo; } // usage .foo { @extend %foo; } @media (min-width: 30em) { .bar { @include foo; } } extend selector within media query outside

this won't help utilize case, option:

%foo { @media (min-width: 20em) { color: red; } } @media (min-width: 30em) { %bar { background: yellow; } } // usage .foo { @extend %foo; } .bar { @extend %bar; } wait until sass lifts restriction (or patch yourself)

there number of ongoing discussions regarding issue (please don't contribute these threads unless have meaningful add: maintainers aware users want functionality, it's question of how implement , syntax should be).

https://github.com/sass/sass/issues/1050 https://github.com/sass/sass/issues/456

css sass media-queries