共计 2150 个字符，预计需要花费 6 分钟才能阅读完成。
引入
自定义属性，是一种开发者能够自主命名和应用的 CSS 属性。浏览器在解决像 color、position 这样的属性时，须要接管特定的属性值，而自定义属性，在开发者赋予它属性值之前，它是没有意义的。所以要怎么给 CSS 自定义属性赋值呢？这倒和习惯无异：
.foo {
color: red;
--theme-color:gray;}
复制代码
自定义元素的定义由 — 结尾，这样浏览器可能辨别自定义属性和原生属性，
如果只是定义了一个自定义元素和它的属性值，浏览器是不会做出反馈的。如下面的代码，.foo 的字体色彩由 color 决定，但 –theme-color 对 .foo 没有作用。
能够用 CSS 自定义元素存储任意无效的 CSS 属性值：
.foo {
--theme-color:blue;
--spacer-width: 8px;
--favorite-number: 3;
--greeting: "How are you";
--reusable-shadow: 0 3px 1px -2px rgba(0,0,0,0.85);}
复制代码
应用
应用 var() 办法实现：
.button {
background-color: var(--theme-color);}
复制代码
这段代码中，咱们把.button 的 background-color 属性赋值为 –theme-color 的值。
同时，这个 –theme-color 能用在任意选择器和属性上：
.button {
background-color: var(--theme-color);}
p {
color: var(--theme-color);}
.title > .p {
border-color: var(--theme-color);}
复制代码
缺省值
如果开发者并没有定义过 –theme-color 这个变量呢？var()能够接管第二个参数作为缺省值：
.button {
background-color: var(--theme-color,gray);}
复制代码
或者把另一个自定义属性作为缺省值：
.button {
background-color: var(--theme-color,var(--default-bg-color));}
复制代码
传参数时总是传入一个缺省值是一个好习惯，特地是在构建 web components 的时候。为了让你的页面在不反对自定义属性的浏览器上失常显示，别忘了加上兼容代码：
.button {
background-color:gray;// 兼容性解决
background-color: var(--theme-color,gray);}
复制代码
作用域和级联
自定义属性听从规范的作用域和级联规定，开发者依照平时应用的习惯来就能够了！
你可能心愿将 –theme-color 设置为全局变量，处处可用。最简略的办法是应用 :root 伪元素：
:root {
--theme-color: gray;}
复制代码
这样，整个 document，都能够应用 –theme-color。
但当你心愿不同的模块应用不同的 –theme-color 值怎么办呢？
只须要在模块的作用域中给属性从新赋值，新的色彩就会分模块失效，而不须要开发者一个个重置应用到 –theme-color 的属性。
section.about {
--theme-color: darkblue;}
section.contacts {
--theme-color: darkred;// 从新赋值}
section.news {
--theme-color: yellow;}
复制代码
CSS 计算
calc() 函数经常被用于跨单位的计算：
.child {
width: calc(100% - 16px)}
复制代码
事实上这个计算是在浏览器运行时进行的，浏览器会将 calc()的计算结果以像素单位出现在屏幕上。
calc() 与 CSS 自定义属性联合
:root {
--base-size: 4px;
--title-multiplier: 5;
--body-multiplier: 3;}
.title {
text-size: calc(var(--title-multiplier) * var(--base-size))}
.body {
text-size: calc(var(--body-multiplier)* var(--base-size));}
复制代码
CSS 与 javascript 之间的桥梁
自定义属性和 Sass、Less 或者 PostCSS 这些处理器语言一个十分重要的不同点在于：浏览器是能够解析自定义属性的。这就意味着开发者能够动静扭转自定义属性的值。这是 CSS 迈出的一大步。
就和平时用 JS 操作元素任意的属性个别，自定义属性也能够通过 getPropertyValue 和 setProperty 办法操作：
const styles = getComputedStle(document.querySelector(‘.foo’));
const oldColor = styles.getPropertyValue(‘–color’).trim();
foo.style.setProperty(‘–color’,’green’);
复制代码
属性值一旦被扭转，所有与这个自定义属性相干的 CSS 属性也都会产生扭转,。这样就能轻松实现批量批改元素的属性值。
