共计 2004 个字符，预计需要花费 6 分钟才能阅读完成。
背景
简单的网站都会有大量的 CSS 代码，通常也会有许多反复的值。
举个例子，同样一个色彩值可能在成千上百个中央被应用到，如果这个值产生了变动，须要全局搜寻并且一个一个替换，效率不高且容易出错。
自定义属性在某个中央存储一个值，而后在其余许多中央援用它。另一个益处是语义化的标识。比方，--main-text-color 会比 #00ff00 更易了解，尤其是这个色彩值在其余上下文中也被应用到。
概念
自定义属性 （有时候也被称作CSS 变量 或者 级联变量）是由 CSS 作者定义的，它蕴含的值能够在整个文档中重复使用。
由自定义属性标记设定值（比方：--main-color: black;），由 var() 函数来获取值（比方：color: **var(--main-color)**;）。
劣势
在构建大型站点时，作者通常会面对可维护性的挑战。在这些网页中，所应用的 CSS 的数量是十分宏大的，并且在许多场合大量的信息会重复使用。
例如，在网页中保护一个配色计划，意味着一些色彩在 CSS 文件中屡次呈现，并被重复使用。当你批改配色计划时，不论是调整某个色彩或齐全批改整个配色，都会成为一个简单的问题，不容出错，而单纯查找替换是远远不够的。
如果应用了 CSS 框架，这种状况会变得尤其蹩脚，此时如果要批改色彩，则须要对框架自身进行批改。
在这些场合应用 LESS 或 Sass 相似的预处理器是十分有帮忙的，然而这种通过增加额定步骤的形式，可能会减少零碎的复杂性。
CSS 变量为咱们带来一些预处理器的便当，并且不须要额定的编译。
这些变量的第二个劣势就是名称自身就蕴含了语义的信息。CSS 文件变得易读和了解。main-text-color 比文档中的 #00ff00 更容易了解，特地是同样的色彩呈现在不同的文件中的时候。
用法
上面是 CSS 变量的应用办法和步骤。
CSS 中申明变量
咱们都晓得，在 JS 中要应用一个变量前，必须申明这个表变量。在 CSS 中也是一样的情理。
申明一个自定义属性，属性名须要以两个减号（--）开始，属性值则能够是任何无效的 CSS 值。和其余属性一样，自定义属性也是写在规定集之内的，如下：
body {
--bg-color: #7F583F;
--color: #F7EFD2;
}下面代码中，body选择器外面申明了两个变量：--bg-color和--color。
它们与 color、font-size 等正式属性没有什么不同，只是没有默认含意。所以 CSS 变量（CSS variable）又叫做“CSS 自定义属性 ”（CSS custom properties）。
规定集所指定的选择器定义了自定义属性的可见作用域。通常的最佳实际是定义在根伪类 :root下，这样就能够在 HTML 文档的任何中央拜访到它了：
:root {--main-bg-color: #eee;}自定义属性名是大小写敏感的，
--my-color和--My-color会被认为是两个不同的自定义属性。
CSS 中应用变量
通过 var() 函数来读取变量。语法如下:
var(custom-property-name, value)- name (必须) 变量名（以两条破折号结尾）。
- value (可选) 示意变量的默认值。如果该变量不存在，就会应用这个默认值。
变量名称必须以两个破折号（–）结尾，且辨别大小写！
应用办法：
element {background-color: var(--main-bg-color);
}变量也能够应用在变量申明中：
:root {
--primary-color: #eee;
--primary-bg-color: var(--main-bg-color);
}变量值只能用作属性值，不能用作属性名。
JS 操作 CSS 变量
在 JS 代码中，咱们可能须要读取 CSS 变量的值，其办法如下：
const root = document.querySelector(":root");
// 设置 CSS 变量
root.style.setProperty("--main-bg-color", "red");
// 读取 CSS 变量
const computedStyle = getComputedStyle(root);
const mainBgColor = computedStyle.getPropertyValue("--main-bg-color");
console.log(mainBgColor);
// 删除 CSS 变量
root.style.removeProperty("--main-bg-color");总结
以上就是对于 CSS 变量的一些基本概念及应用办法，更多详情待后续！
灵便应用 CSS 变量，不仅能够进步生产力，也可能进步代码的可浏览性和维护性。
~
~
~ 本文完
学习乏味的常识，结识乏味的敌人，塑造乏味的灵魂！
大家好！我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢送关注，心愿大家多多指教！
常识与技能并重，内力和外功兼修，实践和实际两手都要抓、两手都要硬！
