Mam klasę pozycji i kompaktową klasę „modyfikatora”:
.item { ... }
.item.compact { /* styles to make .item smaller */ }
Jest okej. Chciałbym jednak dodać @media
zapytanie, które wymusza .item
zwartość klasy, gdy ekran jest wystarczająco mały.
Na początku starałem się to zrobić:
.item { ... }
.item.compact { ... }
@media (max-width: 600px) {
.item { @extend .item.compact; }
}
Ale to generuje następujący błąd:
Nie możesz @extend zewnętrznego selektora z poziomu @media. Możesz tylko @extend selektory w ramach tej samej dyrektywy.
Jak mógłbym to osiągnąć za pomocą SASS bez konieczności kopiowania / wklejania stylów?
css
sass
media-queries
soundly_typed
źródło
źródło
Odpowiedzi:
Prosta odpowiedź brzmi: nie możesz, ponieważ Sass nie może (lub nie chce) skomponować dla niego selektora. Nie możesz znajdować się wewnątrz zapytania o media i rozszerzać czegoś, co jest poza zapytaniem o media. Z pewnością byłoby miło, gdyby po prostu skopiował to, zamiast próbować skomponować selektory. Ale tak nie jest, więc nie możesz.
Użyj miksera
Jeśli masz przypadek, w którym zamierzasz ponownie wykorzystać blok kodu wewnątrz i na zewnątrz zapytań o media i nadal chcesz, aby mógł go rozszerzyć, napisz zarówno klasę mixin, jak i rozszerzoną:
@mixin foo { // do stuff } %foo { @include foo; } // usage .foo { @extend %foo; } @media (min-width: 30em) { .bar { @include foo; } }
Rozszerz selektor w zapytaniu o media z zewnątrz
To naprawdę nie pomoże w przypadku użycia, ale jest to inna opcja:
%foo { @media (min-width: 20em) { color: red; } } @media (min-width: 30em) { %bar { background: yellow; } } // usage .foo { @extend %foo; } .bar { @extend %bar; }
Poczekaj, aż Sass zniesie to ograniczenie (lub załataj je samodzielnie)
Trwa wiele dyskusji dotyczących tego problemu (proszę nie wnosić udziału w tych wątkach, chyba że masz coś sensownego do dodania: opiekunowie są już świadomi, że użytkownicy chcą tej funkcji, to tylko kwestia tego, jak ją wdrożyć i co składnia powinna być).
źródło
%foo
jest niepotrzebne,.foo
może bezpośrednio@include foo
.Dla przypomnienia, oto jak skończyłem, rozwiązując problem, powielając tylko raz wygenerowane style:
// This is where the actual compact styles live @mixin compact-mixin { /* ... */ } // Include the compact mixin for items that are always compact .item.compact { @include compact-mixin; } // Here's the tricky part, due to how SASS handles extending .item { ... } // The following needs to be declared AFTER .item, else it'll // be overridden by .item's NORMAL styles. @media (max-width: 600px) { %compact { @include compact-mixin; } // Afterwards we can extend and // customize different item compact styles .item { @extend %compact; /* Other styles that override %compact */ } // As shown below, we can extend the compact styles as many // times as we want without needing to re-extend // the compact mixin, thus avoiding generating duplicate css .item-alt { @extend %compact; } }
źródło
Uważam, że SASS / SCSS nie obsługuje
@extend
dyrektywy w zapytaniu o media. http://designshack.net/articles/css/sass-and-media-queries-what-you-can-and-cant-do/Być może będziesz musiał użyć zamiast tego mixinu, chociaż nadmiar kodu musi być zważony w stosunku do celu.
źródło
To najczystsze, częściowe rozwiązanie, jakie znalazłem. Tam, gdzie to możliwe, korzysta z @extend i wraca do mixinów w zapytaniach o media.
Dyrektywy zapytania cross-media @extend w Sass
Zobacz artykuł, aby uzyskać szczegółowe informacje, ale sednem jest to, że wywołujesz `` symbol zastępczy '' mieszania, który następnie decyduje, czy wypisać @extend, czy @include.
@include placeholder('clear') { clear: both; overflow: hidden; } .a { @include _(clear); } .b { @include _(clear); } .c { @include breakpoint(medium) { @include _(clear); } }
Ostatecznie może nie być lepsze niż zwykłe użycie mixinów, co jest obecnie akceptowaną odpowiedzią.
źródło
Używam punktów przerwania, ale to ten sam pomysł:
@mixin bp-small { @media only screen and (max-width: 30em) { @content; }
Jak tego użyć:
.sidebar { width: 60%; float: left; @include bp-small { width: 100%; float: none; } }
Jest tekst o mieszankach, w którym możesz dowiedzieć się więcej o tej opcji.
źródło
Czy mógłbyś przeprowadzić restrukturyzację?
.compact { //compact-styles } .item {} .item.compact { @extend .compact } @media (max-width: 600px) { .item { @extend .compact; } }
Jeśli dobrze zrozumiem dokumentację, powinno działać. Myślę, że powodem, dla którego próbujesz nie zadziałać, jest to, że nie widzi .item.compact podczas analizowania @extend, ale to niedoinformowany przypuszczenie, więc weź to z ciężarówką pełną soli! :)
źródło
rails-sass
klejnotu, przy użyciu SASS v3.2.4@extend
w dyrektywach CSS”)