Mixins und SASS

Mixins sind von CSS-Präprozessoren bereitgestellte Tools. Obwohl es sich nicht um Funktionen handelt, können sie als solche wahrgenommen werden und dienen hauptsächlich der Wiederverwendung von Code.

Mehr als einmal mussten wir mehrere Klassen erstellen, die dasselbe tun, aber einen einzelnen Wert ändern, zum Beispiel mehrere Klassen für die Schriftgröße.

.fs-10 {
  font-size: 10px;
}
.fs-20 {
  font-size: 20px;
}
.fs-30 {
  font-size: 30px;
}

Wenn wir genau hinsehen, ist das Einzige, was sich in diesem Szenario ändert, die Zahl, um sowohl die Klasse zu benennen als auch den Schriftgrößenwert festzulegen. Mit einem Mixin können wir eine Funktion erstellen, die diesen Code automatisch für uns erstellt.

Beispiel:

// Esto es un mapa, lo que conocemos como un objeto en JavaScript
$sizes: (
  "10": "10px",
  "20": "20px",
  "30": "30px"
) 

// El mixin que crea las clases
@mixin generate-font-sizes($sizes) {
  // Recorremos cada uno de los elementos del mapa
  @each $key, $value in $sizes{
    // Creamos la clase e interpolamos los valores
    .fs-#{$key} {
      font-size: #{$value};
    }
  }
}

// Invocamos al mixin para que se ejecute
@include generate-font-sizes($sizes);

Wenn wir unseren Code kompilieren, werden wir das gleiche Ergebnis wie beim ersten Mal erhalten, aber jetzt denken Sie vielleicht, dass unser Code länger ist als das Ergebnis, und vielleicht stimmt es, aber wenn ich zum Beispiel gehen möchte 1 bis 100 und erstelle Klassen von fs-1 bis fs-100. Ich kann es auch mit einem Mixin machen

// El mixin que crea las clases
@mixin generate-font-sizes() {
  // El loop que hace el recorrido de 1 a 100
  @for $size from 1 through 100 {
    // Creamos la clase e interpolamos los valores
    .fs-#{$size} {
      font-size: #{$size}px;
    }
  }
}

// Invocamos al mixin para que se ejecute
@include generate-font-sizes();

Damit erhalten wir das erwartete Ergebnis, und das funktioniert nicht nur für die Schriftgröße, sondern für alles, was uns in den Sinn kommt, wir können große Codemengen mit kleinen Codeblöcken in einem Mixin erstellen.

Das ist alles für den Moment, wir haben gelernt, wie man Mixin verwendet und CSS-Code in Präprozessoren wiederverwendet.

Das obige ist der detaillierte Inhalt vonMixins und SASS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!