Variables dans SASS | Expliqué

Pré-processus de style styles (SASS) Awesome Awesome Awesome CSS et fonctionne bien avec toutes ses versions. Il améliore la capacité de la langue de base en soutenant l'utilisation des variables, de la nidification, des mixins, de l'héritage, etc. Si nous parlons de ses variables, c'est un excellent moyen d'empêcher l'écriture de valeurs CSS redondantes encore et encore. Pour en savoir plus sur les variables SASS, suivez l'article jusqu'à la fin.

Variables dans Sass

Les variables SASS sont utilisées pour stocker des informations qui peuvent être utilisées plus tard n'importe où dans la feuille de style si nécessaire. Le type d'informations qu'une variable SASS peut stocker comprend des couleurs, des numéros, des chaînes, des listes, des booléens et des nuls.

Syntaxe

$ variableName: variableValue;

Pour déclarer une variable SASS, vous devez inclure un panneau en dollars ($) suivi du nom de variable, du côlon, de la valeur variable et d'un point-virgule.

Exemple
Explorons davantage les variables SASS à l'aide d'un exemple.

Html

C'est un paragraphe.

C'est un div

Ceci est notre fichier HTML dans lequel nous avons créé deux éléments qui sont un paragraphe et un conteneur div. Entre-temps, le lien du fichier CSS généré à la suite de la compilation du fichier SASS a été fourni à l'attribut HREF de la balise.

Toupet

$ Fontfam: Verdana, Sans-Serif;
$ FontSize: 35px;
$ Fontcolor: rose;
$ Border: 2px Black solide;
$ rembourrage: 10px;
p
Font-Family: $ Fontfam;
taille de police: $ Fontize;
Couleur: $ Fontcolor;

.récipient
rembourrage: $ rembourrage;
Border: $ border;

Ceci est notre fichier sass avec .Extension SCSS. Ici, nous avons créé cinq variables SASS à savoir $ Fontfam, $ Fontize, $ Fontcolor, $ border et $ padding. Une fois déclaré, nous utilisons ensuite ces variables dans notre fichier pour styliser nos éléments.

CSS

Ceci est notre fichier CSS résultant.

Sortir

Les éléments ont été stylés avec succès à l'aide de variables SASS.

Portée des variables SASS

Les variables dans SASS peuvent être déclarées n'importe où dans le document avant qu'elles ne soient utilisées et peuvent avoir une portée globale ou une portée locale.

Une variable SASS avec une portée globale est déclarée au début du fichier et ultérieurement utilisée dans l'ensemble du document si nécessaire.

Pendant ce temps, une variable SASS avec une portée locale est déclarée à l'intérieur d'un bloc et ne peut être utilisée que dans le cadre de ce bloc particulier.

Exemple
L'exemple ci-dessous montre.

Toupet

$ FontSize: 35px;
$ rembourrage: 10px;
p
Font-Family: $ Fontfam;
taille de police: $ Fontize;
Couleur: $ Fontcolor;

.récipient
$ Border: 2px Black solide;
rembourrage: $ rembourrage;
Border: $ border;
taille de police: $ Fontize;

C'est le même code que ci-dessus avec la seule différence que $ Fontize, et $ padding sont des variables globales et peuvent être utilisés n'importe où dans le fichier, en attendant, $ border est une variable locale et ne peut être utilisé que dans le cadre du bloc est déclaré dans. Ce code aura la même sortie que celle démontrée dans la section précédente. De plus, la sortie CSS résultante sera également la même.

Conclusion

Les variables SASS sont utilisées pour stocker des informations qui peuvent être utilisées plus tard n'importe où dans la feuille de style si nécessaire. Ces variables peuvent stocker des couleurs, des nombres, des chaînes, des listes, des booléens et des nuls. Le nom d'une variable SASS doit commencer par un signe ($) et ces variables peuvent avoir une portée globale ou une portée locale. De plus, c'est un excellent moyen d'empêcher l'écriture de valeurs CSS redondantes encore et encore. L'article traite des variables SASS en détail ainsi que des exemples pertinents.