以往，要在CSS中使用“改一点点，全局生效”的变量功能，要么用SCSS、LESS，要么写个脚本生成文件。但实际上，新一点的CSS标准已经自带变量功能。

先看看其它的实现方式

LESS

@main-color: #525f7f;

span {
  color: @main-color;
}

这种方式没有什么问题，但页面需要加载额外加载项，比较耗资源。（SCSS同样）

脚本

main_color = '#525f7f'

css = open('style.css', 'w', encoding='utf-8')
css.write(f'''span {{
    color: {main_color};
}}''')

这种方式需要本地编译脚本，同时兼顾脚本语言和CSS规则，还繁琐。

再看看自带的实现方式

:root {
    --main-color: #525f7f;
}

span {
    color: var(--main-color);
}

定义变量需要统一在:root里用--定义，使用var(--[变量名])调用变量。由于是自带的，所以不需要作额外处理，直接上即可。

目前这种方式已经普及，很多网站都在使用。