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.

3847 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
4 222 vues
Qu'est-ce que HTML ?
Cours sur HTML : Qu'est-ce que HTML ?HTML, ou HyperText Markup Language, est le langage de balisage standard utilisé pour créer des pages Web. Il fournit une structure de base pour organiser le...
HTML
15 450 vues
Première page (index.php)
Pour commencer à développer notre site nous avons besoin de créer une nouvelle page que l'on appellera index.php. Cette page fera office de page d'accueil car lorsque vous allez...
Créer son site
525 vues
Syntaxe de base : balises PHP, commentaires
Introduction à la syntaxe de base en PHPPHP utilise une syntaxe simple et flexible pour écrire du code côté serveur. Commençons par explorer les balises PHP et les commentaires, deux éléments...
PHP
221 vues
Utilisation de gradients, ombres et transitions pour des effets visuels
Utilisation de Gradients, Ombres et Transitions pour des Effets VisuelsEn CSS, vous pouvez utiliser des gradients, des ombres et des transitions pour ajouter des effets visuels attrayants à vos...
CSS
289 vues
Opérateurs arithmétiques (+, -, *, /, %)
Les opérateurs arithmétiques sont utilisés en PHP pour effectuer des opérations mathématiques sur des variables et des valeurs. Voici les opérateurs arithmétiques de base en PHP :1. Addition...
PHP
4 316 vues
Le langage CSS
Le CSS permet de concevoir le design de votre site web. Le CSS agit sur des éléments HTML.On peut intégrer le CSS de deux façons :Directement sur les éléments de votre HTML,Mettre le...
Créer son site
3 710 vues
Différencier HTML (structure) de CSS (présentation)
Différencier HTML (structure) de CSS (présentation)HTML (HyperText Markup Language) et CSS (Cascading Style Sheets) sont deux langages complémentaires utilisés pour créer des sites Web, mais ils...
CSS
3 614 vues
Création de liens hypertexte avec <a>
Création de liens hypertexte avec <a>La balise <a> (ou <a href="">) est utilisée pour créer des liens hypertexte dans une page HTML. Elle permet de lier le contenu d'une page à...
HTML
Publicité
Cette pub permet au site de vivre ...