Lorsque vous écrivez des feuilles de style CSS, vous devez avoir remarqué que vous devez souvent écrire des valeurs particulières telles que la couleur de divers éléments. Par conséquent, pour éviter que ce CSS ne permet à ses utilisateurs de déclarer des variables pour certaines valeurs CSS et de les utiliser dans le code au lieu d'écrire des valeurs encore et encore. Ces variables sont appelées variables CSS que nous avons discutées en profondeur dans cet article. Les sujets en discussion dans cet article sont les suivants.

1. Variables dans CSS
2. Avantages de l'utilisation des variables CSS
3. Déclarant les variables CSS globales et locales
4. Valeurs de secours
5. Variables primordiales dans CSS

Variables dans CSS

CSS permet à ses utilisateurs de créer des propriétés personnalisées composées de noms et de valeurs particuliers qui sont appelés variables CSS. Ces variables lorsqu'elles sont déclarées peuvent être utilisées partout dans le document.

Afin de déclarer ces variables, vous devez suivre un certain ensemble de règles:

• Le premier est que le nom de la propriété personnalisée ou de la variable CSS doit commencer par les doubles traits.
• Ce sont aussi sensibles à la casse, donc des soins spéciaux doivent être pris.

Voici comment nommer ces variables.

--Color texte: bleu;

Afin d'accéder à ces variables dans vos feuilles de style, la fonction var () dans CSS est utilisée. Voici comment vous utilisez la fonction var ().

var (- text-couleur);

Avantages de l'utilisation des variables CSS

Ci-dessous, nous avons mentionné certains avantages de l'utilisation de variables dans CSS.

1. Lorsque vous construisez un site Web très compliqué, vous remarquerez que vos valeurs CSS se répéteront trop souvent. Par conséquent, pour éviter d'écrire plusieurs fois les mêmes valeurs, vous pouvez générer une variable CSS. Ces variables sont stockées en un seul endroit et sont accessibles partout ailleurs dans le fichier.
2. Un autre avantage des variables CSS ou des propriétés personnalisées est que ceux-ci sont faciles à comprendre car ceux-ci sont déclarés par les développeurs eux-mêmes. Par exemple, -Text-Color est beaucoup plus compréhensible que # 0000FF.

Déclarant les variables CSS globales et locales

Les règles du CSS indiquent que les variables CSS ont une portée locale ou mondiale. Une variable avec une portée globale peut être utilisée si nécessaire dans l'ensemble du document. En attendant, une variable avec une portée locale ne peut être récupérée que par le sélecteur dans lequel il est défini.

Aux fins de la création d'une variable globale à l'aide de la fonction var (), elle doit être déclarée dans le: Sélecteur de racines. Pendant ce temps, une variable locale peut être créée à l'intérieur de n'importe quel sélecteur.

Syntaxe

Pour les variables avec la portée globale.

:racine
--pading principal: 5px

La syntaxe indique que tout élément qui accède à la variable-main-padding via la fonction var () aura un rembourrage de 5px.

Pour les variables avec la portée locale.

p
--Color principal: marron;
Couleur: --Main-Text-Color;

Maintenant, nous pouvons utiliser la variable «-main-text-coulor» à l'intérieur du sélecteur «P» localement et avoir la couleur brune.

Exemple 1

Supposons que vous souhaitiez utiliser la fonction var () tout en déclarant les variables globales.

Html

C'est un paragraphe.

Dans l'extrait de code ci-dessus, nous avons simplement créé un conteneur div et imbriqué un

élément à l'intérieur de ce conteneur div.

CSS

:racine
--Pink: # FFC0CB;
--Brown: # 964B00;
--Bleu: # 0000FF;

div
Couleur: var (- bleu);
Color en arrière-plan: var (- blanc);
rembourrage: 15px;

H1
Color en arrière-plan: var (- blanc);
Couleur: var (- bleu);
Border: 3px Var solide (- brun);
rembourrage: 40px;

Dans le code ci-dessus, nous avons défini certaines variables globales dans le: sélecteur de racines correspondant chacun à une couleur spécifique. Ensuite, nous utilisons ces variables globales dans l'ensemble du document si nécessaire en utilisant la fonction var (). L'avantage de fabriquer ces variables globales et de les utiliser dans la fonction var () est que dans ce cas particulier, vous n'avez pas besoin de définir des couleurs d'éléments encore et encore, utilisez plutôt la fonction var ().

Sortir

La fonction var () fonctionne correctement.

Exemple 2
Dans l'exemple ci-dessous, nous avons démontré comment déclarer et utiliser les variables CSS globales et locales.

Html

C'est un titre.

C'est un paragraphe.

Ici, nous avons simplement créé un conteneur Div et imbriqué une rubrique et un paragraphe à l'intérieur.

CSS

:racine
--Pink: # FFC0CB;
--Brown: # 964B00;
--Bleu: # 0000FF;

div
Couleur: var (- bleu);
Color en arrière-plan: var (- rose);
rembourrage: 15px;

H1
Color en arrière-plan: var (- blanc);
Couleur: var (- bleu);
Border: 3px Var solide (- brun);
rembourrage: 40px;

p
--Purple: # 6A0DAD;
couleur: var (- violet);
Border: 2px Var solide (- brun);
taille de police: 16px;
rembourrage: 20px;

Dans le code ci-dessus, nous avons créé quelques variables globales dans le: Selecteur de racines et plus tard en les utilisant via la fonction var () dans l'ensemble du document pour styliser nos éléments. En attendant, si vous remarquez que dans le p sélecteur, nous avons créé une variable locale par le nom -purple pour fournir une couleur violette au paragraphe uniquement. Cette variable locale ne peut être accessible que par le sélecteur dans lequel il est déclaré.

Sortir

Le paragraphe a reçu une couleur violette avec succès en utilisant une variable locale.

Valeurs de secours

Les valeurs de secours sont considérées comme des substituts, lorsque vous souhaitez accéder à une variable CSS en utilisant la fonction var (), cependant, la déclaration de la variable n'est pas valide, ou si la variable n'est pas encore déclarée. Ceux-ci sont également utiles lors de l'utilisation d'éléments personnalisés, ou de l'ombre DOM.

Aux fins de déclarer les valeurs de secours, vous devez suivre un certain ensemble de règles que nous avons mentionnées ici.

1. Le premier paramètre transmis à la fonction var () doit être le nom de la propriété personnalisée qui sera utilisée comme substitut.
2. Le deuxième paramètre transmis à la fonction devrait être une valeur de secours qui sera un substitut à la propriété personnalisée non valide.

Voici un exemple.

div
couleur: var (- couleur texte, rouge);

L'extrait de code ci-dessus définit que l'utilisation de la couleur rouge qui est une valeur de secours en tant que substitut à la couleur du texte si -TTEX-Color n'est pas déclaré.

Maintenant que nous avons compris quelles sont les variables dans CSS, passons à notre prochain sujet.

Variables primordiales dans CSS

Le remplacement d'une variable est un phénomène où une variable en remplace une autre. Maintenant que nous avons appris à déclarer les variables CSS avec une portée globale ou une portée locale, voyons comment nous pouvons remplacer ces variables si nécessaire.

Exemple

Pour démontrer la procédure primordiale, nous utilisons l'exemple utilisé ci-dessus. Ici, une variable locale remplacera une variable globale.

CSS

:racine
--Pink: # FFC0CB;
--Brown: # 964B00;
--Bleu: # 0000FF;

div
Couleur: var (- bleu);
Color en arrière-plan: var (- rose);
rembourrage: 15px;

H1
Color en arrière-plan: var (- blanc);
Couleur: var (- bleu);
Border: 3px Var solide (- brun);
rembourrage: 40px;

p
--Bleu: # 000080;
Couleur: var (- bleu);
Border: 2px Var solide (- brun);
taille de police: 16px;
rembourrage: 20px;

Ce que nous avons fait dans le code ci-dessus, c'est que nous avons déclaré une variable globale -blue et que nous l'utilisons pour styliser certains éléments. Cependant, en ce qui concerne le

élément que nous voulons lui donner une nuance différente de la couleur bleue, donc à l'intérieur du sélecteur P, nous définissons une variable locale avec le même nom "-blue" mais il a une valeur différente. Par conséquent, cette variable locale remplacera la variable globale.

Sortir

Une couleur de la Marine a été fournie au paragraphe en utilisant une variable locale.

Conclusion

CSS permet à ses utilisateurs de créer des propriétés personnalisées composées de noms et de valeurs particuliers qui sont appelés variables CSS. Ces variables peuvent, plus tard, être utilisées dans toute la feuille de style. De plus, ceux-ci ont une portée globale ou une portée locale et peuvent être accessibles en utilisant la fonction var (). Vous pouvez éviter d'écrire des valeurs CSS répétées en utilisant ces variables, en outre, celles-ci sont plus faciles à comprendre. Il est également possible de remplacer les variables CSS les unes avec les autres. Dans cet article, nous avons discuté des variables CSS et comment les remplacer en détail en utilisant divers exemples.