Présentation générale
Les conditions en Sass sont les mêmes que les conditions en programmation standard : on limite l'exécution d'une ou plusieurs lignes au cas où une certaine condition est remplie. Dans le cas où la condition n'est pas remplie, il est possible de tester une autre condition, ou bien d'exécuter d'autres lignes.
Petit exemple tiré de faits réels :
SI ta chambre est rangée
Tu peux aller jouer
SINON
Tu range ta chambre
Leur utilisation permet de pouvoir s'adapter à différentes situations rapidement, sans avoir à modifier son code.
Les conditions sont là pour examiner des expressions, souvent mathématiques, comme des égalités ou des inégalités (plus grand que, plus petit que, …).
a == b : a est egale à b
a > b : a est plus grand que b
a < b : a est plus petit que b
a >= b : a est plus grand ou égal à b
a <= b : a est plus petit ou égal à b
Les conditions fonctionnent grossièrement toujours de cette manière quel que soit le langage de programmation, et comme nous allons le voir, Sass ne fait pas exception.
Fonctionnement
La présentation générale, c'est bien mais la syntaxe c'est mieux. La voilà, dans toute sa splendeur :
@if [condition] {
// CSS si vrai
} @else {
// CSS si faux
}
Ou [condition] est remplacée par une condition comme $width > 100, ou bien $ie == true. En fonction de la condition, le CSS qui s'écrira dans le fichier .css sera celui correspondant a CSS si vrai ou bien a CSS si faux.
Exemple : Sélection automatique de la couleur de l'ombre d'un texte
Cet exemple permet de déterminer automatiquement la couleur à appliquer à l'ombre d'un texte. De cette manière, changer la couleur du texte changera automatiquement la couleur de son ombre.
#mon_id {
$text-color: #444;
$shadow-opacity
// Si le texte est sombre, on met une ombre blanche
@if lightness($text-color) < 50% {
text-shadow: 1px 1px 1px rgba(#fff, $shadow-opacity);
// Sinon, c'est que le texte est clair, et l'ombre donc noir
} @else {
text-shadow: 1px 1px 1px rgba(#000, $shadow-opacity);
}
// On applique la couleur au texte
color: $text-color;
}
