Sass

Variables : Déclarer et utiliser des variables pour stocker des valeurs réutilisables

Variables en SASS : Déclarer et Utiliser


1. Déclaration de variables :


  • En SASS, les variables commencent par le symbole $ suivi du nom de la variable et de sa valeur. Par exemple :


$primary-color: #007bff; 
$font-size: 16px;


2. Utilisation de variables :


  • Une fois que vous avez déclaré une variable, vous pouvez l'utiliser n'importe où dans votre fichier SASS en référençant simplement son nom précédé du symbole $. Par exemple :


body {
    font-size: $font-size;
    color: $primary-color;
}


3. Avantages des variables :


  • Les variables en SASS vous permettent de stocker des valeurs réutilisables telles que les couleurs, les tailles de police, les marges, etc. Cela rend votre code plus lisible, plus maintenable et plus facile à mettre à jour.
  • En utilisant des variables, vous pouvez définir une valeur une fois et l'utiliser à plusieurs endroits dans votre code. Cela évite la répétition de valeurs et réduit les chances d'erreurs.


4. Portée des variables :


  • Les variables en SASS ont une portée limitée à leur bloc parent. Par exemple, si vous déclarez une variable à l'intérieur d'une règle CSS, cette variable ne sera accessible que dans cette règle et ses enfants.
  • Vous pouvez également déclarer des variables globales en dehors de toutes les règles CSS, ce qui les rendra accessibles à tous les fichiers SASS importés.


5. Dynamisme des variables :


  • Les valeurs des variables en SASS peuvent être dynamiques. Cela signifie que vous pouvez changer la valeur d'une variable plus tard dans votre code et toutes les références à cette variable seront mises à jour automatiquement. Par exemple :


$primary-color: #007bff;

.button {
    background-color: $primary-color;
}

// Plus tard dans le code...
$primary-color: #ff6347; // Changement de la valeur de la variable

// Toutes les références à $primary-color seront mises à jour


6. Convention de nommage des variables :


  • Il est recommandé de suivre une convention de nommage significative pour vos variables afin de rendre votre code plus compréhensible pour vous-même et pour d'autres développeurs qui pourraient travailler sur le projet.


Conclusion


En utilisant des variables en SASS, vous pouvez rendre votre code CSS plus propre, plus organisé et plus facile à maintenir. Les variables vous permettent de stocker des valeurs réutilisables et de les mettre à jour facilement à un seul endroit, ce qui améliore l'efficacité de votre processus de développement web.

3811 vues
Modifié le 21 février 2024
Publicité Sitedudev
Cette pub permet au site de vivre ...
Publicité
Cette pub permet au site de vivre ...
Voir d'autres articles
2 354 vues
Comprendre les concepts de base
Comprendre les Concepts de BaseLorsqu'on commence à explorer MySQL, il est essentiel de comprendre les concepts de base qui constituent les fondations de ce système de gestion de base de données...
SQL
324 vues
Utilisation de <tr> pour les lignes, <th> pour les en-têtes et <td> pour les cellules
Utilisation de <tr> pour les lignes, <th> pour les en-têtes et <td> pour les cellulesDans un tableau HTML, la balise <tr> est utilisée pour définir chaque ligne du tableau,...
HTML
1 405 vues
Personnaliser ses conversations
Dans cette dernière vidéo nous allons personnaliser notre messagerie ! 😎Pour cela nous allons donner l’aspect des conversations comme une messagerie de smartphone type Apple ou Samsung.Nous...
Créer son site de rencontres
4 158 vues
Ajout d'images avec <img> et attributs src, alt et width
Ajout d'images avec <img> et attributs src, alt et widthLa balise <img> est utilisée pour afficher des images dans une page HTML. Elle nécessite l'utilisation de certains attributs pour...
HTML
3 958 vues
Formulaire d'inscription en PHP (1/2)
Vous allez maintenant découvrir ou redécouvrir les joies de réaliser son premier formulaire d'inscription en PHP / SQL.Pour cela nous allons construire un formulaire avec des champs à remplir...
Créer son site de rencontres
271 vues
Utilisation des éléments de division <div> et <span> pour structurer le contenu
Utilisation des éléments de division <div> et <span> pour structurer le contenuLes balises <div> et <span> sont des éléments de division utilisés pour structurer et...
HTML
11 666 vues
Barre de recherche : Ajax
À partir de maintenant nous allons développer notre script permettant de contacter une page et de l'exécuter afin d'afficher le résultat de notre saisie.Nous allons commencer par mettre cette...
Créer son site
3 403 vues
Les paragraphes <p> et les sauts de ligne <br>
Les paragraphes <p> et les sauts de ligne <br>Les balises <p> et <br> sont utilisées pour contrôler la mise en forme du texte dans une page HTML. Elles permettent de...
HTML
Publicité
Cette pub permet au site de vivre ...