sass
Schleifen und Bedingungen

While-Schleife

Die @while Direktive @while einen Codeblock, bis die angegebene Bedingung "false" wird. Im folgenden Beispiel wird diese Schleife bis $font-size <= 18 während der Wert für $font-size um 2 erhöht wird.

$font-size: 12;

@while $font-size <= 18 {
    .font-size-#{$font-size} {
        font-size: ($font-size * 1px);
    }

    $font-size: $font-size + 2;
}

Ausgabe des obigen Codes

.font-size-12 {
  font-size: 12px;
}

.font-size-14 {
  font-size: 14px;
}

.font-size-16 {
  font-size: 16px;
}

.font-size-18 {
  font-size: 18px;
}

für Schleife

Die @for Direktive ermöglicht das Durchlaufen eines Codes für eine bestimmte Anzahl von Iterationen und hat zwei Formen:

• @for <var> from <start> through <end> {}
• @for <var> from <start> to <end> {}

Der Unterschied zwischen den beiden Formen ist das Durch und das Bis ; die Durch Schlüsselwort wird die umfassen <end> in der Schleife , wo man will nicht; Mit through ist das Äquivalent von >= oder <= in anderen Sprachen wie C ++, JavaScript oder PHP.

Anmerkungen

• Sowohl <start> als auch <end> müssen Ganzzahlen oder Funktionen sein, die Ganzzahlen zurückgeben.
• Wenn <start> größer als <end> ist, verringert sich der Zähler anstelle der Inkrementierung.

SCSS-Beispiel

@for $i from 1 through 3 {
  .foo-#{$i} { width: 10px * $i; }
}

// CSS output
.foo-1 { width: 10px; }
.foo-2 { width: 20px; }
.foo-3 { width: 30px; }

Bedingte Direktive (wenn)

Die @if Steueranweisung wertet einen bestimmten Ausdruck aus. Wenn sie etwas anderes als false zurückgibt, verarbeitet sie ihren @if .

Sass Beispiel

$test-variable: true !default

=test-mixin
  @if $test-variable
    display: block
  @else
    display: none

.test-selector
  +test-mixin

SCSS-Beispiel

$test-variable: true !default

@mixin test-mixin() {
  @if $test-variable {
    display: block;
  } @else {
    display: none;
  }
}

.test-selector {
  @include test-mixin();
}

Die obigen Beispiele erzeugen das folgende CSS:

.test-selector {
  display: block;
}

Jede Schleife

Mit der @each-Direktive können Sie jede Liste oder Map durchlaufen. Es hat die Form @each $var or <list or map> {} wobei $var ein beliebiger Variablenname sein kann und <list or map> alles sein kann, das eine Liste oder Map zurückgibt.

Im folgenden Beispiel durchläuft die Schleife die Liste $authors autors, wobei jedes Element $author zugewiesen wird, der Stilblock wird mit dem Wert von $author und mit dem nächsten Element in der Liste fortgefahren.

SCSS-Beispiel

$authors: "adam", "steve", "john";
@each $author in $authors {
    .photo-#{$author} {
      background: image-url("avatars/#{$author}.png") no-repeat
    }
}

CSS-Ausgabe

.photo-adam {
  background: image-url("avatars/adam.png") no-repeat;
}
.photo-steve {
  background: image-url("avatars/steve.png") no-repeat;
}
.photo-john {
  background: image-url("avatars/john.png") no-repeat;
}

Mehrfachzuweisung

Mehrfachzuweisung ermöglicht Ihnen den einfachen Zugriff auf alle Variablen, indem Sie mehrere Variablen in der @each Direktive @each .

Verschachtelte Listen

Um einfachen Zugriff auf alle geschachtelten Elemente zu erhalten, können Sie separate Variablen definieren, die mit jedem geschachtelten Element übereinstimmen. Stellen Sie sicher, dass Sie über die richtige Anzahl von Variablen und verschachtelten Elementen verfügen. Im folgenden Beispiel durchläuft eine jede Schleife eine Liste von drei Elementen, von denen jedes drei verschachtelte Elemente enthält. Die falsche Anzahl deklarierter Variablen führt zu einem Compiler-Fehler.

@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

Karten

Die Mehrfachzuweisung funktioniert auch für Maps, ist jedoch auf nur zwei Variablen beschränkt: eine Variable für den Schlüsselzugriff und eine Variable für den Zugriff auf den Wert. Die Namen $key und $value sind im folgenden Beispiel beliebig:

@each $key, $value in ('first': 1, 'second': 2, 'third': 3) {
  .order-#{$key} {
    order: $value;
  }
}

Jede Schleife mit Karten- / Listenwerten

Im folgenden Beispielwert in map wird $color-array als Liste von Paaren behandelt.

SCSS-Eingang

$color-array:(
  black: #4e4e4e,                       
  blue: #0099cc,
  green: #2ebc78
);
@each $color-name, $color-value in $color-array {
  .bg-#{$color-name} {
    background: $color-value;
  }
}

CSS-Ausgabe

.bg-black {
  background: #4e4e4e;
}

.bg-blue {
  background: #0099cc;
}

.bg-green {
  background: #2ebc78;
}