Que signifie var en CSS ?

La fonction var() en CSS fournit des fonctions de stockage et d'utilisation des variables, attribuant des valeurs aux variables et les utilisant dans toute la feuille de style. Utilisation : 1. Utilisez le préfixe -- pour déclarer la variable (-- : ); 2. Utilisez la fonction var() pour obtenir la valeur de la variable (var(-- ;) ). Utilisez var() pour la réutilisabilité, la cohérence et la facilité de maintenance, et pour créer des valeurs qui s'ajustent en fonction des requêtes multimédias ou des variables JavaScript.

Qu'est-ce que var en CSS ?

La fonction var() en CSS vous permet de stocker et d'utiliser des variables. Il vous permet d'attribuer une valeur à une variable, puis de réutiliser cette variable dans votre feuille de style. var() 函数允许你存储和使用变量。它让你可以将值分配给变量，然后在整个样式表中重复使用该变量。

如何使用 var

要使用 var()，请按照以下步骤操作：

1. 声明变量：使用 -- 前缀声明一个 CSS 变量。语法为：--<变量名>: <值>;
2. 使用变量：使用 var() 函数来获取变量的值。语法为：var(--<变量名>);

示例

例如，以下代码声明了一个名为 --primary-color 的变量，并将其设置为蓝色：

:root {
  --primary-color: blue;
}

然后，你可以在样式表的其他部分使用此变量：

.heading {
  color: var(--primary-color);
}

优点

使用 CSS 变量有很多优点，包括：

• 可重用性：你可以轻松地将变量用于多个元素，从而减少代码重复。
• 一致性：变量确保值在整个样式表中一致，从而有助于保持风格指南。
• 易于维护：如果你需要更改变量的值，只需在声明中进行一次更改即可。
• 动态值：你可以使用 var() 函数来创建动态值，例如根据媒体查询或 JavaScript 变量调整大小或颜色。

注意

• 变量必须在要使用的元素之前声明。
• 你可以使用嵌套的变量，例如 var(--var-1)。
• var() 函数不支持计算表达式，例如 var(--var-1 + var(--var-2))

Comment utiliser var🎜🎜🎜Pour utiliser var(), veuillez suivre ces étapes : 🎜

1. Déclarez les variables : utilisez le préfixe -- déclaration Une variable CSS. La syntaxe est : --<Variable name> : <Value>;🎜
2. Utiliser des variables : utilisez la fonction var() pour obtenir la valeur de la variable. La syntaxe est : var(--<Variable name>);🎜

🎜🎜Exemple🎜🎜🎜Par exemple, le code suivant déclare une variable nommée --primary- color et définissez-la sur bleu : 🎜rrreee🎜 Vous pouvez ensuite utiliser cette variable dans d'autres parties de votre feuille de style : 🎜rrreee🎜🎜 Avantages 🎜🎜🎜 L'utilisation de variables CSS présente de nombreux avantages, notamment : 🎜

• 🎜Réutilisabilité : 🎜Vous pouvez facilement utiliser des variables pour plusieurs éléments, réduisant ainsi la duplication de code. 🎜
• 🎜Cohérence : 🎜Les variables aident à maintenir les guides de style en garantissant que les valeurs sont cohérentes dans toute la feuille de style. 🎜
• 🎜Facile à maintenir : 🎜Si vous devez modifier la valeur d'une variable, effectuez simplement la modification une fois dans la déclaration. 🎜
• 🎜Valeurs dynamiques : 🎜Vous pouvez utiliser la fonction var() pour créer des valeurs dynamiques, telles que le redimensionnement ou la coloration en fonction de requêtes multimédias ou de variables JavaScript. 🎜🎜🎜🎜Note🎜🎜
  • Les variables doivent être déclarées avant l'élément à utiliser. 🎜
  • Vous pouvez utiliser des variables imbriquées, telles que var(--var-1). 🎜
  • La fonction var() ne prend pas en charge les expressions de calcul, telles que var(--var-1 + var(--var-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!