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.

3941 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
3 381 vues
Afficher les commentaires
Nous allons reprendre notre page topic.php. Sur cette page nous allons afficher les commentaires postés de vos utilisateur.Dans notre page topic.php nous allons donc afficher les...
Créer son site
386 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
662 vues
Propriétés CSS : comprendre les différentes propriétés et leurs valeurs
Propriétés CSS : Comprendre les différentes propriétés et leurs valeursLes propriétés CSS sont des instructions qui contrôlent l'apparence et le comportement des éléments HTML sur une page...
CSS
4 778 vues
Comment débute-t-on ?
Maintenant que vous savez qu'elles sont les différents langages web à utiliser pour développer un site, vous devez certainement vous demander "Alors, comment développe-t-on un site...
Créer son site
13 493 vues
Notre base de données
Avant d'entamer le développement de notre futur site il nous faut une base de données afin de pouvoir ajouter, modifier ou de supprimer des informations.Étapes...
Créer son site
3 487 vues
Voir le profil d'un utilisateur en PHP
Maintenant que nous avons la liste des utilisateurs, nous allons créer une nouvelle page PHP afin de visiter le profil d'un membre dynamiquement.Pour cela nous allons passer dans l'URL l'identifiant...
Créer son site de rencontres
493 vues
Introduction à CSS pour la mise en forme
Introduction à CSS pour la mise en formeCSS (Cascading Style Sheets) est un langage de feuilles de style utilisé pour définir la présentation visuelle des documents HTML. Il permet de contrôler...
HTML
8 668 vues
Introduction
Je vous propose un cours afin de concevoir votre premier site de A à Z incluant un espace membre, un forum & un blog 😎Les objectif de ce cours :L'objectif et de ce familiariser avec les...
Créer son site
Publicité
Cette pub permet au site de vivre ...