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