Ich habe eine Artikelklasse und eine kompakte "Modifikator" -Klasse:
.item { ... }
.item.compact { /* styles to make .item smaller */ }
Das ist in Ordnung. Ich möchte jedoch eine @media
Abfrage hinzufügen , die die .item
Klasse dazu zwingt , kompakt zu sein, wenn der Bildschirm klein genug ist.
Auf den ersten Blick habe ich Folgendes versucht:
.item { ... }
.item.compact { ... }
@media (max-width: 600px) {
.item { @extend .item.compact; }
}
Dies erzeugt jedoch den folgenden Fehler:
Sie dürfen einen äußeren Selektor nicht innerhalb von @media erweitern. Sie dürfen nur Selektoren innerhalb derselben Direktive erweitern.
Wie würde ich dies mit SASS erreichen, ohne auf Kopier- / Einfügestile zurückgreifen zu müssen?
css
sass
media-queries
soundly_typed
quelle
quelle
Antworten:
Die einfache Antwort lautet: Sie können nicht, weil Sass den Selektor dafür nicht komponieren kann (oder will). Sie können sich nicht innerhalb einer Medienabfrage befinden 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 zusammenzustellen. Aber es ist nicht so, dass du es nicht kannst.
Verwenden Sie ein Mixin
Wenn Sie einen Fall haben, in dem Sie einen Codeblock innerhalb und außerhalb von Medienabfragen wiederverwenden und dennoch möchten, dass er ihn erweitern kann, schreiben Sie sowohl eine Mixin- als auch eine Extend-Klasse:
Erweitern Sie den Selektor innerhalb einer Medienabfrage von außen
Dies wird Ihrem Anwendungsfall nicht wirklich helfen, aber es ist eine weitere Option:
Warten Sie, bis Sass diese Einschränkung aufhebt (oder flicken Sie sie selbst).
Es gibt eine Reihe von laufenden Diskussionen zu diesem Thema (bitte tragen Sie nicht zu diesen Threads bei, es sei denn, Sie haben etwas Sinnvolles hinzuzufügen: Die Betreuer sind sich bereits bewusst, dass Benutzer diese Funktionalität wünschen, es ist nur eine Frage der Implementierung und der Funktionsweise Syntax sollte sein).
quelle
%foo
ist unnötig,.foo
kann direkt@include foo
.Für die Aufzeichnung ist hier, wie ich das Problem gelöst habe, indem ich generierte Stile nur einmal dupliziert habe:
quelle
Ich glaube, SASS / SCSS unterstützt das nicht
@extend
Direktive innerhalb einer Medienabfrage nicht. 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 das Aufblähen des Codes gegen Ihr Ziel abgewogen werden muss.
quelle
Dies ist die sauberste Teillösung, die ich gefunden habe. Wenn möglich, nutzt es @extend und greift bei Medienabfragen auf Mixins zurück.
Medienübergreifende Abfrage @ Erweiterungsanweisungen in Sass
Ausführliche Informationen finden Sie im Artikel. Im Wesentlichen wird jedoch ein Mixin-Platzhalter aufgerufen, der dann entscheidet, ob @extend oder @include ausgegeben wird.
Letztendlich ist es vielleicht nicht besser als nur Mixins zu verwenden, was derzeit die akzeptierte Antwort ist.
quelle
Ich benutze Haltepunkte, aber es ist die gleiche Idee:
Wie man es benutzt:
Es gibt einen Text über Mixins, in dem Sie mehr über diese Option erfahren können.
quelle
Könnten Sie umstrukturieren?
Wenn ich die Dokumentation richtig verstehe, sollte das funktionieren. Ich denke, der Grund, warum Sie versuchen, nicht zu funktionieren, ist, dass beim Parsen von @extend .item.compact nicht angezeigt wird, aber das ist eine nicht informierte Vermutung. Nehmen Sie das also mit einer Lastwagenladung Salz! :) :)
quelle
rails-sass
Juwel mit SASS v3.2.4 kompiliert@extend
in CSS-Richtlinien")