Comment définir une variable en Sass de manière correcte

Sass (Syntactically Awesome Style Sheets) est un métalangage de feuille de style en cascade (CSS) qui est utilisé pour faciliter et améliorer l'écriture de CSS. Il introduit plusieurs mécanismes comme les variables, les mixins, les imbrications, qui permettent d'organiser et de simplifier le code CSS.

L'une des fonctionnalités clés de Sass est la capacité de définir des variables. Les variables en Sass sont déclarées de manière similaire aux variables dans d'autres langages de programmation. Elles sont utilisées pour stocker des informations qui peuvent être réutilisées tout au long de la feuille de style, comme les couleurs, les tailles de police ou les valeurs de marge.

En Sass, une variable est définie en utilisant le symbole $ suivi immédiatement par le nom de la variable. Par exemple, $primary-color: #888; définit une variable nommée primary-color avec la valeur #888.

Notez que le nom de la variable ne doit pas contenir d'espaces, et si vous souhaitez utiliser un nom de variable composé de plusieurs mots, vous pouvez utiliser soit le tiret (-), soit le tiret bas (_).

Ensuite, vous pouvez utiliser cette variable n'importe où dans votre feuille de style en la mentionnant simplement par son nom, comme ceci :

body {
  background-color: $primary-color;
}

En utilisant des variables, vous pouvez facilement modifier une valeur dans votre feuille de style en changeant simplement la valeur de la variable, au lieu de rechercher et de remplacer chaque occurrence.

Enfin, il est important de noter que Sass offre également la possibilité de définir des variables locales et globales, permettant une plus grande flexibilité et organisation de votre code.

La pratique courante recommande de définir toutes vos variables globales dans un fichier séparé, que vous pouvez ensuite importer dans vos autres fichiers Sass. Cela facilite le suivi et la gestion de vos variables, et rend votre code plus propre et plus facile à maintenir.