Les conditions

Les conditions

26 July 2021

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.