Structures de contrôle

Pour simplifier la création de règles répétitives ou conditionnelles, SASS intègre plusieurs structures de contrôle.

Méthodeif

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
p{
2
  @if $nb > 10 {
3
    color: black;
4
  } @else {
5
    color: white;
6
  }
7
}
p{
  @if $nb > 10 {
    color: black;
  } @else {
    color: white;
  }
}

Définitioneach

each permet de réaliser une boucle à partir d'une liste

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
$liste: 1, 2, 3, 4;
2
@each $element in $liste{
3
  .col-#{$element} {
4
    width: (100px * $element);
5
  }
6
}
$liste: 1, 2, 3, 4;
@each $element in $liste{
  .col-#{$element} {
    width: (100px * $element);
  }
}

Attention à l'interpolation dans la chaîne de caractère.

Ce qui donne

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
.col-1 {
2
  width: 100px;
3
}
4
.col-2 {
5
  width: 200px;
6
}
7
.col-3 {
8
  width: 300px;
9
}
10
.col-4 {
11
  width: 400px;
12
}
.col-1 {
  width: 100px;
}
.col-2 {
  width: 200px; 
}
.col-3 {
  width: 300px; 
}
.col-4 {
  width: 400px;
}

each avec une map

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
$map: (1: 50px, 2: 75px, 3: 80px, 4: 150px);
2
@each $key, $value in $map{
3
  .col-#{$key} {
4
    width: $value;
5
  }
6
}
$map: (1: 50px, 2: 75px, 3: 80px, 4: 150px);
@each $key, $value in $map{
  .col-#{$key} {
    width: $value;
  }
}

Ce qui donne

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
.col-1 {
2
  width: 50px;
3
}
4
.col-2 {
5
  width: 75px;
6
}
7
.col-3 {
8
  width: 80px;
9
}
10
.col-4 {
11
  width: 150px;
12
}
.col-1 {
  width: 50px;
}
.col-2 {
  width: 75px; 
}
.col-3 {
  width: 80px; 
}
.col-4 {
  width: 150px;
}

Définitionfor

Les boucles avec compteur

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
@for $i from 1 through 4{
2
  .col-#{$i} {
3
    width: (100px * $i);
4
  }
5
}
@for $i from 1 through 4{
  .col-#{$i} {
    width: (100px * $i);
  }
}

Ce qui donne

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
.col-1 {
2
  width: 100px;
3
}
4
.col-2 {
5
  width: 200px;
6
}
7
.col-3 {
8
  width: 300px;
9
}
10
.col-4 {
11
  width: 400px;
12
}
.col-1 {
  width: 100px;
}
.col-2 {
  width: 200px; 
}
.col-3 {
  width: 300px; 
}
.col-4 {
  width: 400px;
}