@extend Wrapper alias Mixtend

Wenn ein Selektor mit der Direktive @extend erweitert wird, nimmt Sass nicht den CSS-Inhalt aus dem erweiterten Selektor, um ihn in den erweiternden einzufügen. Es funktioniert umgekehrt. Es nimmt den erweiternden Selektor und hängt ihn an den erweiterten an.

Aufgrund seiner Funktionsweise ist es unmöglich, ihn aus verschiedenen Gültigkeitsbereichen zu verwenden. Sie können beispielsweise keinen Platzhalter erweitern, der in einem @media-Block deklariert wurde, noch können Sie einen Platzhalter aus dem Root-Verzeichnis erweitern, wenn Sie sich innerhalb einer @media-Direktive befinden.

Sicherlich können wir einen Weg finden, @extend zu verwenden, wenn möglich, ansonsten Mixins. Tatsächlich ist es machbar, aber es ist ein wenig knifflig, ich nenne das den mixtend Hack. Vielleicht sollten Sie zweimal darüber nachdenken, bevor Sie es überall in Ihrem Projekt implementieren. Vielleicht ist die alleinige Verwendung von Mixins einfacher. Ich überlasse Ihnen das Urteil darüber.

Einpacken von @extend

Die Idee ist eigentlich recht einfach zu verstehen. Zuerst definieren wir das Mixin. Der einzige Parameter ist $extend, der bestimmt, ob das Mixin versuchen soll zu erweitern oder einzubinden. Offensichtlich ist dies ein boolescher Wert (Standard ist true).

Wenn $extend true ist, erweitern wir einen Platzhalter, der nach dem Mixin benannt ist (leider wird dies nicht automatisch berechnet). Wenn es false ist, geben wir den CSS-Code wie ein reguläres Mixin aus.

Außerhalb des Mixins definieren wir den oben genannten Platzhalter. Um die Wiederholung des CSS-Codes im Platzhalter zu vermeiden, müssen wir nur das Mixin einbinden, indem wir $extend auf false setzen, damit es den CSS-Code in den Kern des Platzhalters ausgibt.

/// *Mixtend* hack
/// @author Kitty 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 Anwendung 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;
  }
}

Sublime Text-Snippet

Wenn Sie den Boilerplate-Code speichern möchten, um ihn sehr 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 Tools > New snippet… und fügen Sie den folgenden Inhalt ein.

Ändern Sie gerne die -Taste, um das einzufügen, was Ihnen gefällt; es ist das Wort, das Sie eingeben, bevor Sie tab drücken, um das Snippet zu erweitern. Ich habe mich für mixtend entschieden.

<snippet>
    <content><![CDATA[
@mixin ${1:mixtend}(\$extend: true) {
  @if $extend {
    @extend %${1:mixtend};
  } @else {
    ${2}
  }
}

%${1:mixtend} {
  @include ${1:mixtend}(\$extend: false);
}
]]></content>
    <tabTrigger>mixtend</tabTrigger>
    <scope>source.scss</scope>
</snippet>