SASS -Grundlagen: Die Sass Mixin -Richtlinie

Sass Mixins: Wiederverwendbare CSS -Kraftwerke

In diesem Artikel wird SASS -Mixins untersucht, ein leistungsstarkes Tool zum Erstellen wiederverwendbarer CSS -Snippets, die Staffnung Ihres Codes und die Minimierung der Wiederholung. Wir werden die Mixinerstellung, Inklusion, Argumentbehandlung (einschließlich Standardwerte und variable Argumente) und die Verwendung der @content -Richtlinie für die fortgeschrittene Anpassung behandeln.

.

Schlüsselkonzepte:

• @mixin Mixinerstellung (): @mixin Wiederverwendbare CSS -Blöcke mithilfe der
-Richtlinie definieren und Argumente für Flexibilität optional akzeptieren.
• @include Mixin -Einschluss (): @include Mixins mit der
-Richtlinie in Ihren Sass integrieren und nach Bedarf an Argumentwerten übergeben.
• Argumente:
Mixins können SASS -Datenwerte als Argumente akzeptieren und die Anpassung verbessern. Standardwerte können für optionale Argumente angegeben werden.
• ... Variable Argumente (): padding Verwandt eine unterschiedliche Anzahl von Argumenten, ideal für Eigenschaften wie
.
• @content Anweisung:
Injizieren Sie zusätzliche Stile in das Mixin, sodass Basisstile mit benutzerdefinierten Überschreibungen.

ermöglicht.

Beispiel: Ein einfaches Mixin

<code class="language-css">a:link { color: white; }
a:visited { color: blue; }
a:hover { color: green; }
a:active { color: red; }</code>

Nehmen wir an, Sie möchten sich wiederholende Verbindungsstile vermeiden:

<code class="language-sass">@mixin link-styles($link, $visit, $hover, $active) {
  a {
    color: $link;
    &:visited { color: $visit; }
    &:hover { color: $hover; }
    &:active { color: $active; }
  }
}</code>

ein Sass -Mixin vereinfacht dies:

<code class="language-sass">@include link-styles(white, blue, green, red);</code>

geben es so ein:

Erweiterte Mixin -Techniken:

Standardwerte:

Standardargumentwerte für die optionale Anpassung angeben.

<code class="language-sass">@mixin headline($size, $color: red) {
  font-size: $size;
  color: $color;
}</code>

Variable Argumente:

Akzeptieren Sie eine variable Anzahl von Argumenten.

<code class="language-sass">@mixin padding($pads...) {
  padding: $pads;
}</code>

• @content Für die Stilinjektion: Styles
Innen

Der Mixin -Bereich.

<code class="language-sass">@mixin base-style {
  background-color: #f0f0f0;
  @content;
}

.my-element {
  @include base-style {
    color: blue;
    padding: 10px;
  }
}</code>

Über die Grundlagen hinaus: Für ein umfassendes Verständnis von SASS, einschließlich fortschrittlicher Mixin -Techniken, erkunden Sie Ressourcen wie SitePoint

Sprung Start Sass

von Hugo Giraudel (verfügbar für Premium -Mitglieder oder für den Kauf) .

Dieser Artikel ist eine überarbeitete und aktualisierte Version einer früheren SitePoint -Veröffentlichung.

häufig gestellte Fragen (FAQs):

Dieser Abschnitt beantwortet gemeinsame Fragen zu SASS -Mixins, die ihren Zweck, die Schöpfung, die Einbeziehung, den Argumentumschlag und ihren Vergleich mit SASS -Funktionen abdecken. Es wird auch deren Verwendung mit CSS -Funktionen wie Grid und Flexbox, Browserkompatibilität und ihrer Anwendung innerhalb von SCSS behandelt. (Die detaillierten Antworten werden für die Kürze weggelassen, aber die ursprüngliche Antwort enthält diese Antworten.)

Das obige ist der detaillierte Inhalt vonSASS -Grundlagen: Die Sass Mixin -Richtlinie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!