跳到主要内容

请大胆使用 CSS 自定义属性

在日常交付的前端项目中，几乎很少看见有项目在使用原生 CSS 自定义属性这一特性，也许预处理器在很多年前就完美解决在 CSS 中使用变量难题，因此即使写了很久的代码没用过也不足为奇，但是我想说的是，但是作为一个高质量前端工程师，你应该了解如何去使用它们。

变量定义​

所有自定义变量都应该以 -- 开始，属性值可以是任何有效的值，一个标准的写法就是：

:root {
    --color: black;
}

其中 :root 表示根伪类，在 JavaScript 指代 document.documentElement 对象，使用它意味着我们可以在 HTML 文档中任何位置访问该变量，当然选择器可以是任何元素，意味着我们可以定义一些局部变量，变量会自动具备继承性，子集可以访问父级的变量。

读取变量​

使用 var() 即可读取变量的值，调用示例如下：

.container {
    background: var(--color, black);
}

若你在根元素定义了 --color，就能看到该属性被正确的应用，第二个参数代表参数取不到时的默认值。

计算变量​

CSS 允许我们将自定义变量放入 calc 属性中完成一些简单的计算，比如：

.button {
    --width: 200px;
    width: var(--width);
}

@media (max-width: 640px) {
    .button {
        width: calc(var(--width) / 2);
    }
}

JS读取与设置​

通过 JavaScript 来操作全局自定义属性是实现主题配置最佳方法之一，在此列出基本的操作范式：

const readGlobalVar = (property) => getComputedStyle(document.documentElement).getPropertyValue(`--${property}`).trim()

const writeGlobalVar = (property, value) => document.documentElement.style.setProperty(`--${property}`, value)

兼容性​

主流浏览器都兼容。 image