Variable

Intro

Les variables SCSS sont simples. Il suffit d'attribuer un nom et de le préfixer avec le symbole $ afin de créer une variable. Le délimiteur : permets ensuite de séparer le nom de la variable de sa valeur.

Par exemple, pour définir une variable costume contenant la couleur rouge 🔴:

$costume: red;
Contexte (scope)

Une variable SCSS définie à l'extérieur d'un sélecteur CSS est considérée comme étant globale. Autrement dit, elle peut être utilisée partout dans son fichier. Tandis que les variables SCSS définies à l'intérieur d'un sélecteur CSS sont considérées comme étant locales et ne peuvent être accédées qu'à l'intérieur des accolades {} les encapsulant.

Par exemple:

$costume: red; // Variable globale .spider-man { $logo: blue; // Variable locale background-color: $costume; // ✅ color: $logo; // ✅ } .deadpool { background-color: $costume; // ✅ color: $logo; // ❌ }

Écraser une variable

En donnant un contexte (scope) plus spécifique, il est possible d'écraser la valeur d'une variable.

Par exemple, on pourrait supposer que de base, tous les personnages ont un costume rouge et qu'après on peut gérer les exceptions en écransant la valeur de la variable $costume localement pour un personnage spécifique: Green Goblin.

$costume: red; // 🔴 .spider-man { background-color: $costume; // 🔴 } .green-goblin { $costume: green; // 🟢 background-color: $costume; // 🟢 }

Dans cet exemple, la variable $costume à la valeur red dans le contexte global. Ainsi, si un personnage n'écrase pas cette variable, son costume sera automatiquement rouge 🔴. Tandis que le sélecteur .green-goblin redéfinit la valeur de cette variable dans son propre contexte à green 🟢.

Même si un personnage est défini après .green-goblin, s’il utilise la variable $costume, celle-ci retournera red, car la valeur green n’est retournée qu’à l’intérieur du contexte du sélecteur .green-goblin. Variables CSS

À priori, les variables CSS et les variables SCSS peuvent apparaitre interchangeables. Cependant, elles diffèrent sur certains points importants.

Les variables SCSS sont des variables dites compilées. C'est à dire à dire qu'une fois converties en CSS, il n'y a plus aucune trace de la variable en soi puisqu'elle est remplacée par sa valeur. Tandis que les variables CSS existent en tout temps ce qui permet de modifier une valeur directement dans le navigateur au besoin.

Par exemple, si vous inspectez la balise <html> de cette page (clic-droit / Inspecter / Sélectionnez <html lang="fr-ca">). Vous remarquerez que plusieurs variables CSS sont définies. Vous pouvez remplacer leurs valeurs et voir les changements s'appliquer immédiatement dans la page. Tandis qu'aucune trace de variable SCSS n'est visible.

Pourquoi avoir inventé les variables SCSS?

Il faut faire un saut dans le passé afin de bien comprendre. Les variables Sass furent inventées en 2006. À cette époque, ce fut une grande avancée dans le monde du CSS, car aussi étrange que cela puisse paraître, les variables CSS natives n'existaient pas encore. Ces dernières furent inventées quelques années plus tard. Leur implémentation dans les différents navigateurs requit aussi quelques années de patience. Si bien que leur utilisation réelle ne commença qu'environ 10 ans après les variables Sass.

Variables SCSS