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.

3529 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
6 432 vues
Barre de recherche : Formulaire
Avant d'entamer le développement de notre barre de recherche nous allons reprendre le fichier index.php des articles précédents.Dans notre fichier index.php nous allons y...
Créer son site
129 vues
Inline CSS : l'ajout de styles directement dans les balises HTML
Inline CSS : L'ajout de styles directement dans les balises HTMLL'Inline CSS est une méthode de stylisation où les styles sont appliqués directement à un élément HTML via l'attribut style. Cela...
CSS
131 vues
Comparaison avec d'autres langages de programmation
Comparaison de JavaScript avec d'autres langages de programmationJavaScript est un langage de programmation unique avec ses propres caractéristiques et particularités. Comprendre comment il se...
JS
64 vues
Les promesses
Les Promesses en JavaScriptLes promesses sont un mécanisme de gestion asynchrone en JavaScript qui permet de gérer plus facilement les opérations asynchrones et d'éviter le "callback hell". Les...
JS
1 639 vues
Création de tables avec PhpMyAdmin
1. Accéder à PhpMyAdmin :Ouvrez un navigateur web et accédez à l'URL où vous avez installé PhpMyAdmin sur votre serveur.2. Authentification :Connectez-vous à PhpMyAdmin en utilisant vos...
SQL
8 796 vues
Visiter un profil PHP
Pour visiter le profil d'un autre utilisateur il nous faudra récupérer son ID passer en argument dans l'URL par la méthode $_GET et afficher ses informations comme pour...
Créer son site
106 vues
Déclaration de fonctions
Les fonctions en PHP sont des blocs de code réutilisables qui effectuent une tâche spécifique. Elles permettent d'organiser le code en le divisant en tâches plus petites et plus gérables. Voici...
PHP
134 vues
Pourquoi utiliser PHP ?
Introduction à l'utilisation de PHPPHP est un langage de programmation extrêmement populaire pour le développement web. Voici quelques-unes des raisons principales pour lesquelles PHP est...
PHP
Publicité
Cette pub permet au site de vivre ...