sass
Boucles et conditons

En boucle

La directive @while boucle sur un bloc de code jusqu'à ce que la condition spécifiée devienne fausse. Dans l'exemple suivant, cette boucle s'exécutera jusqu'à $font-size <= 18 tout en incrémentant la valeur de $font-size de 2.

$font-size: 12;

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

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

Sortie du code ci-dessus

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

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

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

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

pour la boucle

La directive @for vous permet de parcourir un code pour une quantité définie d'itérations et a deux formes:

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

La différence entre les deux formes est le travers et le à ; le mot - clé à travers comprendra la <end> dans la boucle où ne sera pas; using through équivaut à utiliser >= ou <= dans d'autres langages, tels que C ++, JavaScript ou PHP.

Remarques

• <start> et <end> doivent tous deux être des entiers ou des fonctions qui renvoient des entiers.
• Lorsque <start> est supérieur à <end> le compteur diminuera au lieu de l'incrément.

Exemple SCSS

@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; }

Directive conditionnelle (if)

La directive de contrôle @if évalue une expression donnée et si elle renvoie autre chose que false , elle traite son bloc de styles.

Sass Exemple

$test-variable: true !default

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

.test-selector
  +test-mixin

Exemple SCSS

$test-variable: true !default

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

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

Les exemples ci-dessus produisent les CSS suivantes:

.test-selector {
  display: block;
}

Chaque boucle

La directive @each vous permet de parcourir toute liste ou carte. Il se présente sous la forme de @each $var or <list or map> {} où $var peut être n'importe quel nom de variable et <list or map> peut être tout ce qui renvoie une liste ou une carte.

Dans l'exemple suivant, la boucle va parcourir la liste $authors attribuant chaque élément à $author , traiter son bloc de styles en utilisant cette valeur de $author et passer à l'élément suivant de la liste.

Exemple SCSS

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

Sortie CSS

.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;
}

Affectation multiple

Les affectations multiples vous permettent d'accéder facilement à toutes les variables en déclarant plusieurs variables dans la directive @each .

Listes imbriquées

Pour accéder facilement à tous les éléments imbriqués, vous pouvez déclarer des variables distinctes correspondant à chaque élément imbriqué. Assurez-vous de disposer du nombre correct de variables et d'éléments imbriqués. Dans l'exemple suivant, chaque boucle effectue une itération dans une liste de trois éléments contenant chacun trois éléments imbriqués. Avoir la mauvaise quantité de variables déclarées entraînera une erreur de compilation.

@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;
  }
}

Plans

L'attribution multiple fonctionne également pour Maps mais se limite à deux variables, une variable pour accéder à la clé et une variable pour accéder à la valeur. Les noms $key et $value sont arbitraires dans l'exemple suivant:

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

Chaque boucle avec des cartes / valeurs de liste

Dans l'exemple ci-dessous, la valeur dans map $color-array est traitée comme une liste de paires.

Entrée SCSS

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

Sortie CSS

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

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

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