CSS 变量

2025-05-26

CSS 变量

替代文本

别再用 Sass 了，我们有 #CSS 变量！我当然还是喜欢 Sass。不过原生 CSS 支持这个功能真是太棒了。无需预处理器，也无需编译 🥳

全局作用域允许你在任何地方访问变量。局部作用域只在你的特定选择器内。



:root {
  /* 1. Defining in Global Scope */
  --color: red;

  /* 2. Available in all selector*/
  color: var(--color); /* red */
}

.local {
  /* 1. Defining in Local Scope */
  --color: blue;

  /* 2. Scoped to the .local class only */
  color: var(--color); /* blue */
}
Enter fullscreen mode Exit fullscreen mode

故事时间...

我已经有一段时间没有讲故事了，所以让我分享一个不满的 CSS 开发人员的旅程，他终于不再那么生气了😂

令人厌恶的重复 CSS 代码

回想起来，我记得必须做很多重复的造型......



.subtitle {
  color: #999;
}
.subtext {
  color: #999;
}
Enter fullscreen mode Exit fullscreen mode

这对我来说一直很烦！因为我从其他编程语言中了解这个概念variables。所以每次看到这种重复，我都会感到很尴尬。

Sass 来救援🦸‍♀️

然后我发现了Sass。耶，我终于可以使用变量了！



$secondary-color: #999;

.subtitle {
  color: $secondary-color;
}
.subtext {
  color: $secondary-color;
}
Enter fullscreen mode Exit fullscreen mode

这一切都很棒。但接下来你还得处理安装 Sass 到项目中的问题，以及处理预处理器和编译的开销。对于一个小项目来说，设置 Sass 的努力根本没意义。所以，我还是回到那个爱抱怨的开发者时代，在推特上发牢骚，抱怨 CSS 有多烦人吧……因为这就是 Twitter 诞生的原因，它就是一个让愤怒的开发者发泄的地方 😅

抛开 Sass，CSS 才是我的英雄💪

CSS 终于受够了我给它灌输的负面能量。于是它推出了 CSS 变量。现在我可以原生地设置变量了。无需预处理器，无需额外安装，开箱即用的 CSS 就这么简单。是不是很棒😍



:root {
  --secondary-color: #999;
}
.subtitle {
  color: var(--secondary-color);
}
.subtext {
  color: var(--secondary-color);
}
Enter fullscreen mode Exit fullscreen mode

我可以抱怨一下这尴尬的语法吗🤔当然可以……但感恩才是通往幸福的途径。所以我要在这个变量天堂里泡一会儿……直到下一个故事时间😂

CSS变量语法

1. 声明 CSS 变量

在变量名前加上两个破折号，--。



--variable-name: some-value;
Enter fullscreen mode Exit fullscreen mode

2. 使用 CSS 变量

并使用它。你可以将变量名传递到var()。



css-property: var(--variable-name);
Enter fullscreen mode Exit fullscreen mode

CSS 变量的作用域

您可以在全局范围内声明 CSS 变量，这意味着它可以在整个应用中使用。或者，您也可以在局部范围内设置 CSS 变量，这样它只能在特定的选择器中使用。

全局范围

要在全局范围内声明它，首先要在里面设置您的定义:root {}。



:root {
  --primary-color: #000;
}

h1 {
  color: var(--primary-color);
}
Enter fullscreen mode Exit fullscreen mode

本地范围

要在局部作用域中声明它，只需在元素块内定义变量即可。并且该变量仅在该选择器内可用。如果您尝试在某个地方使用 is ，则不会有任何效果。



h2 {
  --h2-color: #999;
  color: var(--h2-color);
}

h3 {
  /* No Effect */
  color: var(--h2-color);
}
Enter fullscreen mode Exit fullscreen mode

示例

让我们来看看一些有趣的定义 CSS 变量的方法✅

您可以设置多个值



:root {
  --margin: 10px 20px;
}

div {
  margin: var(--margin);
}
Enter fullscreen mode Exit fullscreen mode

你可以建立价值观

和 一起使用很方便calc()。你有没有感觉到它有种很酷的动态尺寸应用的感觉？是啊，我的蜘蛛感应也开始蠢蠢欲动了！🕷



:root {
  --value: 5;
}

div {
  padding: calc(var(--value) * 1px); /* 5px */
}
Enter fullscreen mode Exit fullscreen mode

⚠️注意：你不能将无单位值与有单位值连接起来。所以这样不行：



:root {
  --value: 5;
}

div {
  padding: var(--value) px; /* ❌ will not give you 5px */
}
Enter fullscreen mode Exit fullscreen mode

☝️如果你想要建立价值观，你需要使用calc()css✅

您可以在另一个定义中引用变量



:root {
  --border-width: 10px;
  --border: var(--border-width) solid #000;
}

div {
  border: var(--border);
}
Enter fullscreen mode Exit fullscreen mode

经过一些测试，我发现顺序并不重要。你可以在前面的定义中引用后面的变量。但 JavaScript 中，变量的定义必须先于变量使用，所以这对我来说有点不对劲 😅



/* This also works */
:root {
  --border: var(--border-width) solid #000;
  --border-width: 10px;
}
Enter fullscreen mode Exit fullscreen mode

覆盖 CSS 变量值

最棒的是，您可以覆盖全局值，因此可以为特定上下文设置一些独特的东西。



:root {
  --default-color: pink;
}

.content {
  /* Override the global css variable */
  --default-color: green;
}

p {
  color: var(--default-color);
}
Enter fullscreen mode Exit fullscreen mode 


<p>Default "Pink" color</p>

<div class="content">
  <p>Overridden "Green" color</p>
</div>
Enter fullscreen mode Exit fullscreen mode

设置后备值

当你使用从未赋值的变量时会发生什么？



p {
  color: var(--color);
}
Enter fullscreen mode Exit fullscreen mode

答案是“什么也不会发生”。你的应用不会崩溃。我觉得这挺好的。但如果这看起来有点冒险，你可以设置一个Fallback Value。



p {
  color: var(--color, pink);
}
Enter fullscreen mode Exit fullscreen mode 


<p>Pink color</p>
Enter fullscreen mode Exit fullscreen mode

如果你确实定义了它，那么定义的颜色就会占据主导地位。



p {
  --color: black;
  color: var(--color, pink);
}
Enter fullscreen mode Exit fullscreen mode 


<p>Black color</p>
Enter fullscreen mode Exit fullscreen mode

在 JavaScript 中使用 CSS 变量

使用 CSS 变量代替 Sass 变量最大的好处是，你可以在 JavaScript 中访问它！而且你知道，一旦 JS 加入进来，一切就变得疯狂了 😆

让我们回顾一下基本用法，看看如何检索和设置 CSS 变量。

从内联样式中检索

如果您通过内联样式设置 CSS 变量。



<p style="--color: red"></p>
Enter fullscreen mode Exit fullscreen mode

然后使用以下命令检索您的值getPropertyValue()：



// Get our <p> element
const element = document.querySelector('p');

// Retrieve our CSS variable "--color"
element.style.getPropertyValue('--color'); // 'red'
Enter fullscreen mode Exit fullscreen mode

从内联或 css 文件中检索

如果您在样式标签或外部 CSS 文件中设置 CSS 变量。



<style>
  p {
    --color: red;
  }
</style>
Enter fullscreen mode Exit fullscreen mode

那么你需要先使用这个getComputedStyle()：



// Get our <p> element
const element = document.querySelector('p');

// Retrieve our CSS variable "--color"
getComputedStyle(element).getPropertyValue('--color'); // 'red'
Enter fullscreen mode Exit fullscreen mode

是的，您也可以使用这种方式来检索内联样式：




<p style="--color: red"></p>
Enter fullscreen mode Exit fullscreen mode 



// Get our <p> element

const element = document.querySelector('p');



// Retrieve our CSS variable "--color"

getComputedStyle(element).getPropertyValue('--color'); // 'red'
Enter fullscreen mode Exit fullscreen mode




使用 JS 设置 CSS 变量

要调整 CSS 变量，只需使用setProperty。




// Get our <p> element

const element = document.querySelector('p');



// Set our "--color" variable to be "blue"

element.style.setProperty('--color', 'blue');
Enter fullscreen mode Exit fullscreen mode




简单示例

让我们把所有内容放在一起，看一个简单的例子。这里我们想检查点击文本时文本的颜色。




<p style="--color:red; color: var(--color)"></p>
Enter fullscreen mode Exit fullscreen mode 



// Get our <p> element

const element = document.querySelector('p');



// On click, change text from "red" to "blue"

element.addEventListener('click', function() {

  element.style.setProperty('--color', 'blue');

});
Enter fullscreen mode Exit fullscreen mode




从 JavaScript 中检索全局 CSS 变量

如果你在全局范围内设置 CSS 变量。要在 JavaScript 中检索该值，你必须使用getComputedStyle路由，但不是传递元素，而是传递document.documentElement。因此，像这样：




:root {

  --color: red;

}
Enter fullscreen mode Exit fullscreen mode 



getComputedStyle(document.documentElement).getPropertyValue('--color'); // "red"
Enter fullscreen mode Exit fullscreen mode




浏览器支持

除了派对💩 Internet Explorer，其余浏览器都是游戏！

社区意见

@lisovskyvlad : IE11 :( 有 JS polyfill，但根据我们的经验，它使 ie11 变得非常慢，几乎无法使用 :(

@phillipkent：你还是不明白为什么我们不能假设IE11用户能够接受糟糕的体验？哈哈

☝️这是我最喜欢的回复了。以后每次有人让我修复IE的问题，我肯定都会用这个。我非常提倡责任意识。但只有这一次我会说：“是你的问题，不是我的问题”😂

@lfdn：使用 CSS 变量可以实现一些巧妙的功能，比如轻松控制不同视口/页面上的字体大小、间距和颜色。你甚至可以通过更改一些 CSS 变量轻松实现暗黑模式。

@jhildenbiddle：如果您希望 IE/旧版浏览器支持 CSS 自定义属性（例如“CSS 变量”），可以看看css-vars-ponyfill。请原谅我的自我推销（我就是作者），但我认为对于那些仍然为 IE/旧版浏览器支持而苦恼的人来说，它会很有帮助——就像我不久前一样。

社区示例

@dillonheadley： css 变量太棒了。以下是我使用它们做的一些很酷的事情。无需覆盖规则即可灵活调整容器宽度： CodePen

@azzcatdesign：我完全支持 CSS 变量！我在 CodePens 上用全局变量和作用域变量以及 calc() 做了响应式排版、间隔符和容器。我甚至进一步完善了 HSL 颜色，并将按钮颜色的独立值抽象为局部变量。虽然 CSS 中变量的颜色编辑功能无法像 SCSS 那样使用，例如：darken(\$color, 10%)，但我发现我并没有遗漏 SCSS 中的颜色变量，只是组织方式不同。

资源

感谢阅读❤
打个招呼！Instagram | Twitter |博客| SamanthaMing.com

文章来源：https://dev.to/samanthaming/css-variables-8di
Devto 翻译
PREV
Flexbox 速查表 Flexbox30：通过 30 个小技巧学习 Flexbox Flexbox30
NEXT
JavaScript 中的类