Was ist die @extend-Direktive in SASS?

SASS ermöglicht es Entwicklern, besser lesbaren Code zu schreiben und ihn besser zu bearbeiten. Es enthält mehrere Direktiven wie @media, @content, @include, @mixin, @extend usw., die Funktionen bereitstellen, damit Entwickler besseren Code als normales CSS schreiben können.

In diesem Tutorial lernen wir @directives in SASS kennen. Mit der @extend-Direktive können Entwickler CSS-Code erweitern. Mixins erweitern jedoch auch CSS-Code und vermeiden Duplikate. Mit der @extend-Direktive können wir außerdem Codeduplizierungen vermeiden.

Wenn die Schriftarten Ihrer Anwendung beispielsweise über ein gemeinsames CSS verfügen und überall eine andere Schriftgröße erforderlich ist, können Sie den Schriftstil erweitern und eine benutzerdefinierte Schriftgröße hinzufügen. Dadurch entfällt die Notwendigkeit, doppelten Code zu schreiben.

Darüber hinaus können Entwickler die Vererbung in CSS mithilfe der @extend-Direktive implementieren, was wir anhand von Beispielen lernen werden.

Grammatik

Benutzer können die @extend-Direktive in SASS gemäß der folgenden Syntax verwenden.

selector {
   /* CSS code */
}
Another_CSS_selector {
   @extend selector;
   /* CSS code */
}

In der obigen Syntax können wir allgemeines CSS in den Deklarationsblock des „Selektors“ schreiben. Danach können wir den Selektor innerhalb von „Another_CSS_Selector“ erweitern und unseren eigenen Code hinzufügen.

Beispiel 1 (Grundlegende Verwendung der @extend-Direktive)

Im folgenden Beispiel haben wir einige Stile für ein HTML-Element mit dem Klassennamen „card“ definiert. Anschließend definieren wir das CSS für die Elemente „small_card“ und „large_Card“. Wir haben die @extend-Direktive in beiden Selektoren verwendet, um das CSS des „Card“-Selektors zu erweitern. Darüber hinaus haben wir einige zusätzliche CSS-Anweisungen wie Breite, Höhe usw. in die Selektoren „small_card“ und „large_card“ eingefügt.

.card {
   background-color: aliceblue;
   color: green;
   border: 2px solid pink;
   border-radius: 1.4rem;
}
.small_card {
   @extend .card;
   width: 100px;
   height: 100px;
   margin: 5px;
   padding: 5px;
}
.large_card {
   @extend .card;
   width: 500px;
   height: 500px;
   margin: 10px;
   padding: 10px;
}

Ausgabe

In der Ausgabe unten können wir beobachten, dass der Stil des „card“-Selektors auf die „small_card“- und „large_card“-Selektoren angewendet wird. Zusätzliches CSS wird auch separat auf beide Selektoren angewendet.

.card,
.small_card,
.large_card {
   background-color: aliceblue;
   color: green;
   border: 2px solid pink;
   border-radius: 1.4rem;
}
.small_card {
   width: 100px;
   height: 100px;
   margin: 5px;
   padding: 5px;
}
.large_card {
   width: 500px;
   height: 500px;
   margin: 10px;
   padding: 10px;
}

Beispiel 2 (Vererbungskette mit @extend-Direktive)

Im folgenden Beispiel zeigen wir, wie man mithilfe der @extend-Direktive eine Vererbungskette erstellt. Hier haben wir etwas CSS in den „.first“-Selektor eingefügt. Danach haben wir den „.first“-Selektor innerhalb des „.second“-Selektors erweitert und etwas zusätzliches CSS hinzugefügt.

Als nächstes erweitern wir den „.second“-Selektor innerhalb des „.third“-Selektors und den „.third“-Selektor innerhalb des „.fourth“-Selektors. Deshalb haben wir hier eine Vererbungskette mit verschiedenen CSS-Selektoren erstellt.

.first {
   width: 100px;
   height: auto;
}
.second {
   @extend .first;
   color: blue;
}
.third {
   @extend .second;
   background-color: pink;
   border: 2px dotted red;
}
.fourth {
   @extend .third;
   margin: 10px;
   padding: 1rem;
}

Ausgabe

Die folgende Ausgabe zeigt, wie der CSS-Code auf verschiedene CSS-Selektoren angewendet wird, wenn wir mithilfe der @extend-Direktive eine Vererbungskette erstellen.

.first,
.second,
.third,
.fourth {
   width: 100px;
   height: auto;
}
.second,
.third,
.fourth {
   color: blue;
}
.third,
.fourth {
   background-color: pink;
   border: 2px dotted red;
}
.fourth {
   margin: 10px;
   padding: 1rem;
}

Beispiel 3 (Mehrfachvererbung mit @extend-Direktive)

In diesem Beispiel demonstrieren wir, wie man Mehrfachvererbung mithilfe der @extend-Direktive nutzt. Mehrfachvererbung bedeutet, dass ein einzelner Selektor mehrere Selektoren erweitert.

Hier haben wir die CSS-Selektoren „.container“ und „.main“ definiert und etwas CSS hinzugefügt. Anschließend erweitern wir innerhalb des CSS-Selektors „.element“ die Selektoren „.container“ und „.main“.

.container {
   width: 500px;
   height: 500px;
   background-color: beige;
}
.main{
   color: pink;
   float: left;
   max-width: 600px;
   max-height: 700px;
   overflow: auto;
}
.element {
   @extend .main;
   @extend .container;
   padding: 2%;
}

Ausgabe

.container,
.element {
   width: 500px;
   height: 500px;
   background-color: beige;
}
.main,
.element {
   color: pink;
   float: left;
   max-width: 600px;
   max-height: 700px;
   overflow: auto;
}
.element {
   padding: 2%;
}

Beispiel 4 (Verwendung der @extend-Direktive innerhalb der @media-Direktive)

Im folgenden Beispiel verwenden wir die @extend-Direktive innerhalb der @media-Direktive. Allerdings gibt der SASS-Compiler immer dann einen Fehler aus, wenn wir einen CSS-Selektor erweitern, der außerhalb der @media-Direktive innerhalb des Selektors der @media-Direktive definiert ist.

Hier haben wir den CSS-Selektor „.small_button“ um den CSS-Selektor „.button“ in der @media-Direktive erweitert. Benutzer können beobachten, dass sich beide Selektoren hier innerhalb der @media-Direktive befinden.

@media small_screen {
   .button {
      width: 50%;
      clear: both;
      font-size: 1.3rem;
   }
   .small_button {
      @extend .button;
      @extend .main;
      height: 25%;
   }
}

Ausgabe

@media small_screen {
   .button,
   .small_button {
      width: 50%;
      clear: both;
      font-size: 1.3rem;
   }
   .small_button {
      height: 25%;
   }
}

Beispiel 5 (Platzhalterauswahl)

Wie der Name schon sagt, können wir einen Platzhalterselektor erstellen, indem wir das (%)-Symbol vor dem Selektornamen hinzufügen. Wenn wir SASS-Code kompilieren, erscheint der Platzhalterselektor nicht im Ausgabecode, sondern sein Stil wird anstelle der Erweiterung hinzugefügt.

Hier definieren wir beispielsweise den Platzhalterselektor „%container“. Danach haben wir die Containerselektoren innerhalb von „small_container“ und „medium_container“ erweitert.

In der Ausgabe können wir beobachten, dass sie nicht den Selektor „Container“ enthält, sondern „small_container“ und „large_container“ den Platzhaltercode „Container“.

%container {
   color: red;
   background-color: green;
   padding: 3%;
   margin: 0 auto;
}
.small_container {
   @extend %container;
   width: 100px;
   height: 100px;
}
.medium_container {
   @extend %container;
   width: 300px;
   height: 300px;
}

Ausgabe

.small_container,
.medium_container {
   color: red;
   background-color: green;
   padding: 3%;
   margin: 0 auto;
}
.small_container {
   width: 100px;
   height: 100px;
}
.medium_container {
   width: 300px;
   height: 300px;
}

Benutzer haben in diesem Tutorial gelernt, wie man die @extend-Direktive verwendet. Grundsätzlich können wir damit Stylesheets erweitern und Duplikate von Code vermeiden. Darüber hinaus können wir mithilfe der @extend-Direktive Vererbungsketten in CSS erstellen.

Das obige ist der detaillierte Inhalt vonWas ist die @extend-Direktive in SASS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!