共计 3568 个字符，预计需要花费 9 分钟才能阅读完成。
前言
在古代浏览器中, 咱们会常常看到这样的属性:
element {--main-bg-color: brown;}这里咱们就来介绍一下他, 并提供一些相干的阐明
简介
自定义属性（有时候也被称作 CSS 变量或者级联变量）是由 CSS 作者定义的，它蕴含的值能够在整个文档中重复使用。由自定义属性标记设定值（比方：–main-color: black;），由 var() 函数来获取值（比方：color: var(–main-color);）
申明
申明一个自定义属性，属性名须要以两个减号（–）开始，属性值则能够是任何无效的 CSS 值。
如前言中的 --main-bg-color 属性
通常 的最佳实际是定义在根伪类 :root 下，这样就能够在 HTML 文档的任何中央拜访到它了：
/*:root 选择器匹配文档根元素。*/
/* 在 HTML 中，根元素始终是 html 元素。*/
/* 也就是说：root 示意的是根元素 */
:root {--main-bg-color: brown;}留神：自定义属性名是大小写敏感的，–my-color 和 –My-color 会被认为是两个不同的自定义属性。
同时不能蕴含 $，[，^，(，% 等字符，一般字符局限在只有是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线 -”这些组合，然而能够是中文，日文或者韩文，例如
body {
-- 深蓝: #369;
background-color: var(-- 深蓝);
}应用
element {background-color: var(--main-bg-color);
}这些自定义属性，仅当须要的时候才会计算，而并不会按其余规定进行保留。比方，你不能为元素设置一个属性，而后让它从兄弟或旁支子孙规定上获取值。属性仅用于匹配以后选择器及其子孙，这和通常的 CSS 是一样的。
默认值
用 var() 函数能够定义多个备用值(fallback value)，当给定值未定义时将会用备用值替换。
/* 如果提供了第二个参数，则示意备用值，当自定义属性值有效时失效。第二个参数能够嵌套，然而不能持续平铺开展上来了，例如：*/
.two {color: var(--my-var, red); /* Red if --my-var is not defined */
}
.three {background-color: var(--my-var, var(--my-background, pink)); /* pink if --my-var and --my-background are not defined */
}
.three {background-color: var(--my-var, --my-background, pink); /* Invalid: "--my-background, pink" */
}第二个例子展现了如何解决一个以上的 fallback。该技术可能会导致性能问题，因为它花了更多的工夫在解决这些变量上。
在 js 中操作
在 JavaScript 中获取或者批改 CSS 变量和操作一般 CSS 属性是一样的：
// 获取一个 Dom 节点上的 CSS 变量
element.style.getPropertyValue("--my-var");
// 获取任意 Dom 节点上的 CSS 变量
getComputedStyle(element).getPropertyValue("--my-var");
// 批改一个 Dom 节点上的 CSS 变量
element.style.setProperty("--my-var", jsVar + 4);CSS 变量的空格尾随个性
body {
--size: 20;
font-size: var(--size)px;
}此处 font-size:var(--size)px 等同于 font-size:20 px，留神，20 前面有个空格，所以，这里的 font-size 应用的是 <body> 元素默认的大小。
应用场景
简略的实现一种进度条:
里面有一层背景层，而后外面有进度条，还有进度值。
在过来，会应用两层 div 元素，而后 JS 去扭转外面有色彩条条的宽度，同时设置进度值。
<label> 图片 1：</label>
<div class="bar" style="--percent: 60;"></div>
<label> 图片 2：</label>
<div class="bar" style="--percent: 40;"></div>
<label> 图片 3：</label>
<div class="bar" style="--percent: 20;"></div>.bar {
height: 20px; width: 300px;
background-color: #f5f5f5;
}
.bar::before {
display: block;
counter-reset: progress var(--percent);
content: counter(progress) '%\2002';
width: calc(1% * var(--percent));
color: #fff;
background-color: #2486ff;
text-align: right;
white-space: nowrap;
overflow: hidden;
}
能够看到，咱们只须要一层 div 标签，DOM 层级简略了，而后，须要批改的 HTML 变动项仅仅是一个 –percent 自定义属性而已。
更多场景可参考此文章: https://www.zhangxinxu.com/wo…
扩大
咱们能够通过 @property 来扩大 CSS 变量:
他的语法:
@property --property-name {
syntax: '<color>';
inherits: false;
initial-value: #c0ffee;
}@property 规定中 syntax 和 inherits 描述符是必须的; 如果其中任何一项缺失, 整条规定都将生效并且会被疏忽。
initial-value 描述符仅在 syntax 描述符为通用 syntax 定义时是可选的，否则 initial-value 也是必须的——如果此时该描述符缺失, 整条规定都将生效且被疏忽。
当然咱们也能够应用 js 来创立:
window.CSS.registerProperty({
name: '--my-color',
syntax: '<color>',
inherits: false,
initialValue: '#c0ffee',
});他的作用, 很多状况是为了实现了一些以往无奈简略实现的动画成果
具体能够参考此文章, 外面举了几个例子: https://juejin.cn/post/695120…
兼容性
目前 css 变量的兼容是最低 Chrome49:
在 CSS 中咱们也能够进行兼容性解决:
.selector: {}
@supports ((--a: 0)) {
/* supported */
.selector: {}}
@supports (not (--a: 0)) {
/* not supported */
.selector: {}}在 js 中也能够进行对应判断
const isSupported =
window.CSS &&
window.CSS.supports &&
window.CSS.supports('--a', 0);
而 @property 还只是一个试验中的属性, 他的兼容要求是非常高的:
polyfill
https://github.com/jhildenbid…
应用此兼容间接能够达到的兼容:
Chrome 19+
Edge 12+
Firefox 6+
IE 9+
Safari 6+
目前的状况
less/sass
在大多数的我的项目中, 是应用 less/sass/scss 的, 然而在这几种 css 预处理工具中曾经有了变量的性能, 如果再加上 CSS 原生变量一起应用的话, 就会显得很冗余
针对这些预处理器, 咱们就应用原生 css 变量代替原有的变量, 其余的仍旧放弃不变
css in js
在 root 中定义结束根底 CSS 后, 就能够在 js 中应用了, 在这种框架有他是有很大定施展空间的
原子 css
当初罕用的一种原子化 CSS 框架: tailwindcss
在这种框架中, 外部就宽泛应用 CSS 变量, 所以如果你能应用 Tailwind, 你就能应用 CSS 变量
总结
CSS 变量这一性能, 当初的浏览器反对度曾经足够了, 同时针对现有的 CSS 多种预处理器, 有了肯定的适配度, 如果有应用的打算, 能够尝试引入了
当然当初没有一个比拟全面的解决方案, 想要再张望下也是没问题的
援用
- https://developer.mozilla.org…
- https://www.zhangxinxu.com/wo…
- https://juejin.cn/post/693753…
- https://www.zhangxinxu.com/wo…
- https://developer.mozilla.org…
