Variables SASS

Cet article explique les variables SASS.

Nous fournirons une explication détaillée des variables SASS et apprendrons leur utilisation étape par étape.

YouTube Video

Variables SASS

SASS est un langage d’extension CSS qui permet d’écrire du CSS de manière plus flexible et efficace. Parmi ses fonctionnalités, les variables sont un outil puissant pour maintenir la cohérence des styles tout en facilitant les modifications.

Qu’est-ce que les variables SASS ?

Les variables SASS permettent de stocker des valeurs telles que les couleurs, les tailles de police et les espacements fréquemment utilisés dans le CSS, afin de les gérer à un seul endroit.

En utilisant des variables, vous pouvez changer facilement les styles et améliorer la lisibilité du code.

Comment écrire des variables

Les variables peuvent être écrites comme suit.

1// Variable syntax
2//$variable-name: value;
3$primary-color: #3498db;

• Vous devez préfixer le nom de la variable avec le symbole $.
• variable-name est le nom de la variable. Il est recommandé de lui donner un nom clair et descriptif.
• value est la valeur assignée à la variable.

Utilisation de base des variables

Voici un exemple de base d’une variable SASS.

 1// Variable definition
 2$primary-color: #3498db;
 3$secondary-color: #2ecc71;
 4$base-font-size: 16px;
 5
 6// Variable usage
 7body {
 8    font-size: $base-font-size;
 9    color: $primary-color;
10    background-color: $secondary-color;
11}

• Une fois que vous avez défini une variable comme $primary-color, vous pouvez réutiliser la même valeur autant de fois que vous le souhaitez.
• Pour changer une valeur, il suffit de modifier la définition de la variable, ce qui améliore la maintenabilité.

Sortie CSS générée

1body {
2    font-size: 16px;
3    color: #3498db;
4    background-color: #2ecc71;
5}

Utiliser des variables dans l’imbrication

Combiner l’imbrication SASS avec des variables aide à organiser votre code et le rend plus facile à gérer.

 1@use "sass:color";
 2
 3// Variable definition
 4$button-bg: #e74c3c;
 5$button-color: #fff;
 6$button-padding: 10px 20px;
 7
 8.button {
 9    background-color: $button-bg;
10    color: $button-color;
11    padding: $button-padding;
12
13    &:hover {
14        background-color: color.adjust($button-bg, $lightness: -10%);
15    }
16}

• Vous pouvez utiliser des variables à l’intérieur de sélecteurs imbriqués.
• En combinant des variables, vous pouvez obtenir un style flexible, comme assombrir une couleur de 10% en utilisant la fonction color.adjust.

Sortie CSS générée

1.button {
2    background-color: #e74c3c;
3    color: #fff;
4    padding: 10px 20px;
5}
6
7.button:hover {
8    background-color: #c0392b;
9}

Variables avec valeurs par défaut

Dans SASS, vous pouvez définir des valeurs par défaut pour les variables. Définir des valeurs par défaut permet d’utiliser des variables sans écraser celles qui existent déjà.

1// Set default value
2$font-size: 14px !default;
3
4// Define the variable in another file
5$font-size: 16px;
6
7p {
8    font-size: $font-size;
9}

• En ajoutant !default, la variable ne sera pas écrasée si elle est déjà définie.
• Ceci est utile lors d’un développement en équipe ou pour des paramètres globaux de projet.

Sortie CSS générée

1p {
2    font-size: 16px;
3}

Portée des variables

Les variables SASS ont une portée, et leur disponibilité dépend de l’endroit où elles sont définies. Comprendre la portée aide à éviter l’écrasement involontaire des variables.

1. Portée globale

1$global-color: #ff6347;
2
3.header {
4    color: $global-color;
5}

• Les variables à portée globale sont disponibles dans tout le fichier.

2. Portée locale

1.card {
2    $card-bg: #f0f0f0;
3    background-color: $card-bg;
4}
5
6.button {
7    // Error: $card-bg cannot be used
8    background-color: $card-bg;
9}

• Les variables à portée locale ne sont disponibles qu’à l’intérieur d’une imbrication spécifique ou d’un fichier.

Utiliser des variables dans les calculs

Les variables SASS peuvent également être utilisées dans les calculs. Les calculs peuvent aussi être effectués sur les valeurs unitaires et les couleurs.

 1@use "sass:color";
 2
 3$base-padding: 10px;
 4$double-padding: $base-padding * 2;
 5
 6.container {
 7    padding: $double-padding;
 8}
 9
10$main-color: #3498db;
11$lighter-color: color.adjust($main-color, $lightness: 20%);
12
13h1 {
14    color: $lighter-color;
15}

Sortie CSS générée

1.container {
2    padding: 20px;
3}
4
5h1 {
6    color: #5dade2;
7}

• Utiliser des variables pour ajuster les couleurs ou calculer les espacements améliore la maintenabilité.

Résumé

Les variables SASS sont une fonctionnalité essentielle pour une gestion et une maintenance efficaces du CSS.

Utiliser des variables SASS permet de préserver une cohérence des styles dans tout le projet et de faciliter les modifications.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video