CSS 变量

核心：CSS 原生支持的 “变量”，运行时可修改，解决传统预处理器（Sass/Less）变量 “编译后固定” 的问题。

1. 基本用法

/* 1. 定义变量（--开头，通常在:root全局作用域） */
:root{
    --main-color:#42b983;
    --font-size:16px;
}

/* 2. 使用变量（var()函数） */
.box{
    color: var(--main-color);
    font-size:var(--font-size);
    /* 可选：设置默认值（变量不存在时生效） */
    background:var(--bg-color,#fff);
}

2. 核心优势（对比 Sass/Less 变量）

特性	CSS 变量	Sass/Less 变量
执行时机	运行时（浏览器解析）	编译时（打包后固定）
动态修改	支持（JS 可改）	不支持（编译后无变量）
作用域	遵循 CSS 作用域（继承 / 覆盖）	仅编译时作用域

3. 动态修改（JS 操作 CSS 变量）

// 获取根元素的CSS变量
const root = document.documentElement;
// 读取变量
getComputedStyle(root).getPropertyValue('--main-color'); // #42b983
// 修改变量（所有使用该变量的元素会自动更新）
root.style.setProperty('--main-color', '#ff0000');