A quoi sert la variable CSS var() ? Explication détaillée de l'utilisation de la variable CSS var()

Lorsqu'un projet Web prend de l'ampleur, son CSS peut devenir astronomiquement volumineux et encombré. Pour nous aider à résoudre ce problème, de nouvelles variables CSS apparaîtront bientôt dans les principaux navigateurs, permettant aux développeurs de réutiliser et de modifier facilement les propriétés CSS récurrentes. Quiconque a utilisé SASS ou Less devrait savoir à quel point sa fonction variable est excellente, mais ces variables sont des préprocesseurs et doivent être compilées avant utilisation. Maintenant que les variables sont disponibles dans Vanilla CSS, vous pouvez les utiliser instantanément dans votre navigateur ! [Lecture recommandée : Tutoriel CSS]

Définition et utilisation des variables CSS

Comme toute autre définition CSS, les variables suivent les mêmes règles de portée et d'héritage. Le moyen le plus simple de les utiliser est de les rendre disponibles globalement en ajoutant la déclaration à la pseudo-classe :root afin que tous les autres sélecteurs puissent en hériter.

html :

:root {
  --awesome-blue：＃2196F3;
}

Pour accéder à la valeur dans une variable, on peut utiliser la syntaxe var(…). Notez que les noms sont sensibles à la casse, donc –foo != –FOO.

.element {
background-color:var(--awesome-blue);
}

Prise en charge des navigateurs

Les navigateurs couramment utilisés, à l'exception d'IE, sont parfaitement pris en charge. Vous pouvez obtenir plus de détails ici – [Je peux utiliser des variables CSS](https://caniuse.com/#. recherche=var()). Vous trouverez ci-dessous quelques exemples illustrant les utilisations typiques des variables CSS. Pour vous assurer qu'ils fonctionnent correctement, essayez de les visualiser sur l'un des navigateurs mentionnés ci-dessus.

Exemple 1 – Couleurs du thème

Les variables en CSS sont plus utiles lorsque nous devons appliquer les mêmes règles encore et encore à plusieurs éléments, comme la répétition des couleurs dans un thème. Au lieu de copier et coller à chaque fois que nous voulons réutiliser la même couleur, nous la mettons dans une variable et y accédons à partir de là.

Maintenant, si notre client n'aime pas la nuance de bleu que nous choisissons, nous pouvons changer le style en un seul endroit (la définition de la variable) pour changer la couleur de tout le thème. Sans variables, nous devons rechercher et remplacer manuellement chaque occurrence.

Vous pouvez copier le code et le tester dans votre éditeur

* {margin: 0;padding: 0;box-sizing: border-box;}html {padding: 30px;font: normal 13px/1.5 sans-serif;color: #546567;background-color: var(--primary-color);}.container {background: #fff;padding: 20px;}h3 {padding-bottom: 10px;margin-bottom: 15px;}p {background-color: #fff;margin: 15px 0;}button {font-size: 13px;padding: 8px 12px;background-color: #fff;border-radius: 3px;box-shadow: none;text-transform: uppercase;font-weight: bold;cursor: pointer;opacity: 0.8;outline: 0;}button:hover {opacity: 1;}
<!-- 分割线 -->:root {
--primary-color: #B1D7DC;
--accent-color: #FF3F90;
}
html {
background-color: var(--primary-color);
}
h3 {
border-bottom: 2px solid var(--primary-color);
}
button {
color: var(--accent-color);
border: 1px solid var(--accent-color);
}

<div class="container">
<h3>对话框窗口</h3>
<p>过放荡不羁的生活，容易得像顺水推舟，但是要结识良朋益友，却难如登天。</p>
<button>确认</button>
</div>

Exemple 2 – Lisibilité du nom de classe d'attribut

Une autre chose importante à propos des variables Le but est lorsque nous voulons enregistrer des valeurs de propriétés plus complexes afin de ne pas avoir à nous en souvenir. Le meilleur exemple est d'avoir plusieurs paramètres, tels que les règles CSS box-shadow, transform et font.

En plaçant une propriété dans une variable, nous pouvons y accéder en utilisant un nom sémantiquement lisible.

html{background-color: #F9F9F9;}
ul{padding: 20px;list-style: none;width: 300px;}
li{font: normal 18px sans-serif;padding: 20px;transition: 0.4s;margin: 10px;color: #444;background-color: #fff;cursor: pointer;}
<!-- 分割线 -->
:root{
--tiny-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
--animate-right: translateX(20px);
}
li{
box-shadow: var(--tiny-shadow);
}
li:hover{
transform: var(--animate-right);
}

<ul>
<li>我在这里!</li>
<li>我在这里!</li>
<li>我在这里!</li>
</ul>

Exemple 3 – Variables à changement dynamique

Les règles standard aident à résoudre les conflits lorsqu'une propriété personnalisée est déclarée plusieurs fois, la dernière définie dans la feuille de style remplace celle définie ci-dessus.

L'exemple ci-dessous montre à quel point il est facile pour les utilisateurs de modifier dynamiquement les propriétés tout en gardant le code clair et concis.

.container{background: #fff;padding: 20px;}
p{transition: 0.4s;}
.title{font-weight: bold;}
<!-- 分割线 -->
.blue-container{
--title-text: 18px;
--main-text: 14px;
}
.blue-container:hover{
--title-text: 24px;
--main-text: 16px;
}
.green-container:hover{
--title-text: 30px;
--main-text: 18px;
}
.title{
font-size: var(--title-text);
}
.content{
font-size: var(--main-text);
}

<div class="blue-container">
<div class="green-container">
<div class="container">
<p class="title">这是个标题</p>
<p class="content">将鼠标悬停在不同的颜色区域上可以更改此文本和标题的大小。</p>
</div>
</div>
</div>

[示例地址](https://codepen.io/w3cbest/pen/OrxLLE)
正如您所看到的，CSS变量非常简单易用，开发人员不必花费太多时间在各处开始应用它们。以下是扩展内容：
var()函数有两个参数，如果自定义属性失败，它可用于提供回退值：

width``: var(–custom-width, 20%``);

Les propriétés personnalisées peuvent être imbriquées :

*   –base-color: #f93ce9;
*   –background-gradient: linear-gradient(to top, var(–base-color), #444);

Les variables peuvent être combinées avec une autre nouvelle fonctionnalité de CSS : l'utilisation de la fonction calc() .

*   –container-width: 1000px;
*   max-width: calc(var(–container-width) / 2);

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!