Wenn Sie einen Selektor mit der @extendDirektive erweitern, übernimmt Sass den CSS-Inhalt nicht aus dem erweiterten Selektor, um ihn in den erweiterten Selektor einzufügen. Es funktioniert umgekehrt. Es nimmt den ausziehbaren Selektor und hängt ihn an den erweiterten an.
Aufgrund seiner Funktionsweise ist es unmöglich, es aus verschiedenen Bereichen zu verwenden. Sie können beispielsweise weder einen Platzhalter erweitern, der in einem @mediaBlock deklariert wurde , noch einen Platzhalter von root aus erweitern, wenn Sie sich innerhalb einer @mediaDirektive befinden.
Sicherlich können wir einen Weg finden, @extendwenn möglich, anders zu mischen. In der Tat ist es machbar, aber es ist ein bisschen schwierig, ich nenne das den Mixtend-Hack. Vielleicht möchten Sie es sich zweimal überlegen, bevor Sie es überall in Ihrem Projekt implementieren. Vielleicht wäre es einfacher, nur Mixins zu verwenden. Ich überlasse Ihnen den Richter darüber.
Verpackung @extend
Die Idee ist eigentlich ganz einfach zu verstehen. Zuerst definieren wir das Mixin. Der einzige Parameter ist $extend, der definiert, ob das Mixin nicht erweitert, sondern erweitert werden soll. Offensichtlich ist es ein Boolescher Wert (standardmäßig true).
Wenn $extendist true, erweitern wir einen Platzhalter nach dem mixin benannt (leider ist dies nicht automatisch berechnet). Wenn dies der falseFall ist, wird der CSS-Code wie bei einem normalen Mixin ausgegeben.
Aus dem Mixin definieren wir den oben genannten Platzhalter. Um zu vermeiden, dass der CSS-Code im Platzhalter wiederholt wird, müssen wir das Mixin nur durch Setzen $extendauf falseso einfügen , dass der CSS-Code im Kern des Platzhalters abgelegt wird.
/// *Mixtend* hack /// @author Hugo Giraudel @mixin mixtend-boilerplate($extend: true) ( @if $extend ( @extend %mixtend-boilerplate-placeholder; ) @else ( // Mixtend content ) ) %mixtend-boilerplate-placeholder ( @include mixtend-boilerplate($extend: false); )Beispiel
Als einfaches Beispiel verwenden wir den Micro-Clearfix von Nicolas Gallagher.
@mixin clearfix($extend: true) ( @if $extend ( @extend %clearfix; ) @else ( &:after ( content: ''; display: table; clear: both; ) ) ) %clearfix ( @include clearfix($extend: false); )Die Verwendung ist recht einfach:
.a ( @include clearfix; ) .b ( @include clearfix; ) @media (min-width: 48em) ( .c ( @include clearfix(false); ) )Ergebnis CSS:
.a:after, .b:after ( content: ''; display: table; clear: both; ) @media (min-width: 48em) ( .c:after ( content: ''; display: table; clear: both; ) )Erhabener Textausschnitt
Wenn Sie das Boilerplate speichern möchten, um es in hohem Maße wiederverwendbar zu machen, werden Sie erfreut sein zu wissen, dass es sehr einfach ist, ein Sublime Text-Snippet dafür zu erstellen. Gehen Sie in Sublime zu Extras> Neues Snippet… und fügen Sie den folgenden Inhalt ein.
Fühlen Sie sich frei, den Schlüssel zu ändern , um zu setzen, was auch immer Ihr Boot schwimmt; Es ist das Wort, das vor tabdem Drücken eingegeben werden muss , um das Snippet zu erweitern. Ich ging mit mixtend.
mixtend source.scss