Erweiterung Selektoren aus Medien-Anfragen mit Sass

Question

Ich habe eine Elementklasse und eine kompakte „Modifier“ Klasse:

.item { ... } 
.item.compact { /* styles to make .item smaller */ } 

Das ist in Ordnung. Ich möchte jedoch eine @media Abfrage hinzufügen, die die Klasse .item zu kompakt, wenn der Bildschirm klein genug ist.

Auf den ersten Gedanken, ist es das, was ich zu tun versucht:

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

Aber das erzeugt den folgenden Fehler:

You may not @extend an outer selector from within @media. You may only @extend selectors within the same directive.

Wie würde ich erreichen dies SASS mit, ohne Zuflucht zu kopieren/Stile einfügen?

Answer 1

Die einfache Antwort ist: Sie können nicht, weil Sass den Selektor dafür nicht (oder nicht) zusammenstellen kann. Sie können nicht innerhalb einer Medienabfrage sein und etwas erweitern, das außerhalb einer Medienabfrage liegt. Es wäre sicherlich schön, wenn es einfach eine Kopie davon nehmen würde, anstatt zu versuchen, die Selektoren zu komponieren. Aber so geht es nicht.

ein mixin Verwenden

Wenn Sie einen Fall, in dem Sie die Wiederverwendung einen Block von Code innerhalb sein werden und außerhalb der Medien-Anfragen und wollen immer noch es in der Lage sein, es zu verlängern, dann schreiben Sie sowohl eine mixin und ein verlängern Klasse:

@mixin foo { 
    // do stuff 
} 

%foo { 
    @include foo; 
} 

// usage 
.foo { 
    @extend %foo; 
} 

@media (min-width: 30em) { 
    .bar { 
     @include foo; 
    } 
} 

erweitern Wähler innerhalb einer Medienabfrage von außen

Dies wird nicht wirklich Ihren Anwendungsfall helfen, aber es ist eine weitere Option:

%foo { 
    @media (min-width: 20em) { 
    color: red; 
    } 
} 

@media (min-width: 30em) { 
    %bar { 
    background: yellow; 
    } 
} 

// usage 
.foo { 
    @extend %foo; 
} 

.bar { 
    @extend %bar; 
} 

Warten Sie, bis Sass Diese Einschränkung hebt (oder selbst patchen)

Es gibt eine Reihe von laufenden Diskussionen zu diesem Thema (bitte zu diesen Themen nicht beitragen, wenn Sie etwas Sinnvolles muss hinzufügen: die Maintainer sind sich bereits bewusst, dass Benutzer diese Funktionalität wünschen, es ist nur eine Frage, wie sie implementiert werden soll und wie die Syntax aussehen soll.

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

Answer 2

Können Sie umstrukturieren?

Wenn ich die Dokumentation richtig verstehe, sollte das funktionieren. Ich denke, der Grund, warum Sie versuchen, wird nicht funktionieren, ist, dass es .item.compact nicht sieht, wenn es das @extend analysiert, aber das ist eine uninformierte Schätzung, also nehmen Sie das mit einer Ladung Salz! :)

Answer 3

glaube ich SASS/SCSS nicht die @extend Richtlinie innerhalb einer Medienabfrage unterstützt. http://designshack.net/articles/css/sass-and-media-queries-what-you-can-and-cant-do/

Möglicherweise müssen Sie stattdessen ein Mixin verwenden, obwohl der Code Bloat gegen Ihr Ziel abgewogen werden muss.

Answer 4

Für die Aufzeichnung hier ist, wie ich das Problem mit der Lösung am Ende nur einmal erzeugen Stile Duplizieren:

// 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; 
    } 
} 

Answer 5

Dies ist die sauberste, Teillösung, die ich gefunden habe. Es nutzt, soweit möglich, @extend und greift innerhalb von Media-Anfragen auf Mixins zurück.

Cross-Media Query @extend Directives in Sass

den Artikel für weitere Informationen finden Sie aber das Wesentliche ist, dass Sie einen mixin Platzhalter "nennen, die zur Ausgabe @extend oder einer @include entscheidet dann, ob.

Letztendlich ist es vielleicht nicht besser als nur Mixins zu verwenden, was derzeit die akzeptierte Antwort ist.