Formation Le préprocesseur SASS : Les boucles

Les boucles permettent de répéter un code un certain nombre de fois en changeant une valeur au fur et à mesure.

@for $i from 1 through 4 {
    .m-#{$i} {
        margin:0 ($i * .25rem);
    }
}

$animals: bear, lion, camel;

@each $animal in $animals {

    .icon-#{$animal} {
        background: url(img/#{$animal}.png);
    }
}

$categories: 
    chien rgb(114, 114, 114),
    chat rgb(223, 170, 73),
    poisson rgb(137, 137, 212);

@each $category in $categories {
    .#{nth($category, 1)} {
        background: nth($category, 2);

        @if (lightness(nth($category, 2)) > 50%) {
            color: #000;
        } @else {
            color: #FFF;
        }
    }
}

Génèrera le code CSS suivant :

.m-1 {
  margin: 0 0.25rem;
}

.m-2 {
  margin: 0 0.5rem;
}

.m-3 {
  margin: 0 0.75rem;
}

.m-4 {
  margin: 0 1rem;
}

.icon-bear {
  background: url(img/bear.png);
}

.icon-lion {
  background: url(img/lion.png);
}

.icon-camel {
  background: url(img/camel.png);
}

.chien {
  background: #727272;
  color: #FFF;
}

.chat {
  background: #dfaa49;
  color: #000;
}

.poisson {
  background: #8989d4;
  color: #000;
}