SASS – Leçon 5 : les conditions et les boucles

Les conditions

Avec les conditions, il est possible de vérifier certaines informations dans notre fichier SCSS. Par exemple, si la couleur est égale à orange, alors on définie de nouveaux parametres :

CSS généré :

Grâce à cette condition, il est possible de changer la valeur de $shadow en paramétrant $color. Dans cet exemple, nous vérifions la valeur de $color, néanmoins, plusieurs autres comparaisons sont possible. Découvrez tous les control directive de SASS.

Les boucles

Les boucles permettent de répéter une instruction autant de fois que vous le souhaitez.

La boucle @for

CSS généré :

La boucle @while

CSS généré :

La boucle @each

CSS généré :

Cette liste peut être définie dans une variable (comparable aux tableaux en PHP). Chaque valeur doit être séparée par une virgule.
Exemple : $var: puma, sea-slug, egret, salamander;