理解 CSS 变量

2025-06-07

理解 CSS 变量

CSS 变量，又称“CSS 自定义属性”。它允许您直接在 CSS 中使用变量。它们对于减少 CSS 中的重复代码非常有用，还能实现强大的运行时效果（例如主题切换），并具有各种多边形填充功能，可满足未来的 CSS 功能需求。它遵循 DRY 原则（不要重复自己）。借助 CSS 变量，您可以一次性本地化值，简化初始开发、迭代测试和后期维护。它也是 CSS 规范的正式组成部分。那么，让我们开始探索吧。

基本声明

任何 CSS 属性，例如--颜色、大小、位置等，--都可以存储在 CSS 变量中。它们的名称都以 为前缀--，您可以通过在元素中添加其他样式的位置来声明它们：

例如：

/* Define CSS variables and scope */
:root {
 --maincolor: black;
 --secondarycolor: red;
}

/* Use CSS Variables */
body {
 background: var(--maincolor);
 color: white;
}

body p {
 background: var(--secondarycolor);
}
Enter fullscreen mode Exit fullscreen mode

这里我在选择器中定义了两个包含颜色值的 CSS 变量:root。这两个变量在选择器中定义，并受其各自的选择器作用域限制。需要注意的是，与其他 CSS 属性不同，CSS 变量区分大小写，因此--maincolor和--Maincolor被视为两个不同的变量。

要使用 CSS 变量，我们需要将其值包装在var()函数中，并将变量名传递给函数。之后，我们可以选择所需的 CSS 属性并使用该变量的值。

例如：

a {   
 color: var(--maincolor);  
 text-decoration-color: var(--secondarycolor); 
}
Enter fullscreen mode Exit fullscreen mode

CSS 变量的另一个很酷的功能是我们甚至可以将一个 CSS 变量的值全部或部分设置为另一个 CSS 变量：

例如：

/* Define CSS variables and scope */
:root {
 --darkfont: green; 
 --darkborder: 5px dashed var(--darkfont);
}

/* Use CSS Variables */
.container {
 color: var(--darkfont);
 border: var(--darkborder);
}
Enter fullscreen mode Exit fullscreen mode

范围和级联

CSS 变量的作用类似于普通样式属性；变量在级联的任何位置都可用。

例如，这些变量可以被整个页面上的任何内容使用：

root {
 --darkborder: 5px solid black;
}

body {
 --darkborder: 1px solid darkred;
}

img{
 border: var(--darkborder); /* img border will be 1px solid darkred */
}
Enter fullscreen mode Exit fullscreen mode

这里我们在两个不同的选择器中两次定义了同一个--darkborderCSS 变量。由于级联规则，BODY 选择器中的变量具有更高的优先级，因此在 IMG 元素中使用时会更优胜。

CSS 变量也默认继承，因此在父元素上定义的 CSS 属性的值在子元素中使用时也会应用于子元素。

例如：

:root {
 --myborder: 2px solid black;
}

ul {
 margin: 0;
 border-left: var(--myborder);
}

ul ul {
 margin-left: 30px;
}
Enter fullscreen mode Exit fullscreen mode

initial但是，我们也可以通过在选择器中设置继承属性来禁用它。从上面的例子来看

:root {
 --myborder: 2px solid black;
}

ul {
 margin: 0;
 border-left: var(--myborder);
}

ul ul {
 --myborder: initial; /* reset --myborder variable */
 margin-left: 30px;
}
Enter fullscreen mode Exit fullscreen mode

媒体查询的优势

我们可以将这种模式用于 CSS 变量媒体查询，其中所有更改都发生在浏览器中，并且变量确实知道它们的使用条件。这避免了我们重复使用选择器而不是属性。

例如：

body {  
 --primary: #7F583F;
 --secondary: #F7EFD2; 
}

a {
 color: var(--primary);
 text-decoration-color: var(--secondary); 
}

@media screen and (min-width: 480px) {   
 body {    
  --primary:  #F7EFD2;   
  --secondary: #7F583F;  
 } 
}
Enter fullscreen mode Exit fullscreen mode

查看codepen DEMO

当 CSS 变量未定义时设置后备值

background: var(--primarybg, white); 
/* Normal value as fallback value */

font-size: var(--defaultsize, var(--fallbacksize, 36px)); 
/* var() as fallback value */
Enter fullscreen mode Exit fullscreen mode

要为不支持该功能的浏览器提供后备值，您可以执行以下操作：

background: white; 
/* background value for browsers that don't support CSS variables */
background: var(--primarybg, white);
Enter fullscreen mode Exit fullscreen mode

现在每个人都会开心！

浏览器支持

替代文本

好吧，有很多绿色信号可以测试。

结论

读到这里，我希望你对探索 CSS 变量的优势感到兴奋。所以我建议你在项目中尝试一下，享受它带来的乐趣！

如果您发现这个博客非常有用，那么请随时分享您的想法和意见，如果您有任何问题或疑问，请给我留言。

到那时，
继续黑客攻击，干杯

文章来源：https://dev.to/nirazanbasnet/understanding-css-variables-4cj0
Devto 翻译
PREV
JavaScript 中的所有数据类型
NEXT
Node.js 中使用 Google API 的 OAuth 2.0