本文的计划是向您展示原生 CSS 变量的工作原理，以及如何使用它们让您的工作更轻松。随着您的 Web 应用程序变得越来越大，CSS 也变得庞大、冗余并且很多时候变得凌乱不堪。在良好的上下文中使用 CSS 变量，可为您提供重用和轻松更改重复出现的 CSS 属性的机制。
在“纯”CSS 支持变量之前，我们有像 Less 和 Sass 这样的预处理器。但是它们需要在使用前进行编译，因此（有时）增加了额外的复杂性。
如何定义和使用 CSS 变量（也称为自定义属性）
让我从您可能已经熟悉的东西开始：在 JavaScript 中使用 var。
要声明一个简单的 JavaScript 变量，您将编写如下内容：
let myColor = "green";要声明一个 CSS 变量，您必须在该变量的名称前添加一个双破折号。
body {
--english-green-color: #1B4D3E;
}现在，为了使用 CSS 变量的值，我们可以使用 var(…) 函数。
.my-green-component{
background-color: var(--english-green-color);
}管理 CSS 变量的最简单方法是将它们声明到 :root 伪类中。鉴于 CSS 变量像任何其他 CSS 定义一样遵循规则，将它们放在 :root 中将确保所有选择器都可以访问这些变量。
:root{
--english-green-color: #1B4D3E;
}浏览器支持 CSS 变量吗？
浏览器对 CSS 变量的支持一点也不差。如果您查看 Can I Use CSS Variables，那么您将看到所有主要浏览器都支持开箱即用的 CSS 变量。无论是在移动设备上还是PC设备上。
如果您的许多用户（仍在）使用 IE，请谨慎。
相关推荐
-
CSS截断长文本并使用省略号代替
网站很多地方都需要用省略号来截断长文本，比如分类页里每篇文章的概要等，那么怎么用css来实现呢？其实并不复杂，最后的效果如下图： 我们要用 text-overflow: ellipsis; 表示用省略号代替截断的文字。 要实现图中...
-
postcss的作用（postcss和cssmodule是什么？有什么作用？）
postcss是什么？ 根据官网的解释，它是一种javascript编写的工具，用来转化css的。可以认为它是处理css的插件集合，需要配合诸如webpack、gulp等编译工具才能展现它强大的能力。 目前社区提供了非常多的插件，比较有...
-
如何异步加载 CSS 文件
我们可以像这样异步加载 CSS： 应该什么时候使用css异步加载？ CSS 渲染是阻塞的，所以要考虑性能问题，因为浏览器下载 CSS，会停止绘制页面。因此，任何对首屏内容不重要的 CSS 都应该异步加载。另外，14kb-ish 是...
-
在动画期间隐藏滚动条
CSS 仍然无法为自动尺寸auto设置动画。 但可以尝试使用 JavaScript 技巧来实现，Brandon Smith 不久前概述了这种方法。不过我总是想到这个解决方案，因为它太简单了： 另一个问题是滚动条。 当我们设置 max-height: ...
-
CSS calc()函数用法
calc() 是一个 CSS 函数，可让您直接在 CSS 中计算值。例如： 此功能最有用的功能之一是您可以混合多个 CSS 单位使用。在我们的示例中，我们使用了像素百分比，当然我们也可以使用 em、pt、rem 等。 我发现90%情况都...
-
如何在 CSS 中使用 currentColor 值
在 CSS 中，我们有一个名为 currentColor 的特殊颜色值，可能大多数人都不知道。 currentColor 所做的是获取颜色属性的值并将其用于任何其他具有颜色参数的属性。 例如以下内容： 下面currentColor写法与上面效果一...
