SASS - Les conditions
Les conditions sont très pratiques pour vérifier certaines informations dans notre fichier SCSS.
Utilisation
Supposons que dans votre feuille de styles, vous ayez plusieurs boutons de différentes couleurs et que selon la couleur du bouton, l'ombre générée n'est pas la même.
Nous placerons cette condition dans une fonction pour plus de facilité d'utilisation.
$shadow: '';
@function shadow($color) {
@if($color == 'red') {
$shadow: 0 5px 0 red;
}
@elseif($color == 'blue') {
$shadow: 5px 5px 0 blue;
}
@else {
$shadow: 5px 5px 10px black;
}
@return $shadow;
}
.btn-blue {
box-shadow: shadow('blue');
}
.btn-yellow {
box-shadow: shadow('yellow');
}
Résultat :
.btn-blue {
box-shadow: 5px 5px 0 blue;
}
.btn-yellow {
box-shadow: 5px 5px 10px black;
}
Je passe la couleur de mon bouton à ma fonction shadow
et grâce aux conditions, j'effectue une vérification à chaque étape. Si l'une de ces conditions est vraie, alors j'affecte une valeur à la variable $shadow
que je retourne. Si jamais, aucune des conditions n'est remplie, alors le else
prend la relève et j'affecte une valeur par défaut à mon ombre.