只能在less和sass等预处理器里写css变量吗？不是的早在2015年css3中就新增了变量的特性。css变量的优势可以为我们带来一些预处理器的便利，并且不需要额外的编译。还能实现css变量换肤功能。
一、css变量兼容性
到目前为止，各大浏览器厂商基本支持了这个新特性。
肯定有小伙伴想，一些css预处理器也支持变量啊，比如less，sass等。css变量和预处理器里面的变量有着本质的区别，css变量是浏览器支持的特性，而预处理器的变量近在css的处理过程中支持，处理完成后这些变量会代替为具体的值。
二、css变量定义
:root {--main-bg-color: #eee;}上面的代码定义了一个名为–main-bg-color的变量。变量名前必须有两个连字符（–）。
变量必须在一个声明块内声明。这里使用了:root选择器，因此这个变量可以在整个网页使用。这里可以推断出，css变量是有作用域的概念的，如果是定义在别的选择器里面的话，只能在应用了这个选择器元素的子元素所用的类中去引用这个变量。
1、我们看个具体的例子
:root、page-content选择器中定义了分别定义了–main-color、–content-color两个颜色变量。在类page-content中可以引用–main-color，在类page-content-spec中可以引用–content-color，而在类page-title中无法引用–content-color变量。
2、动态改变css variables
不要将css variables理解为一个全局的常量，定义在:root中，在子选择器中引用；应该被看作一个选择器的入参，输入不同的参数，有不同的表现。简单来说，可以定义一个变量为黑色，然后在某个容器中重新将其定义为白色。那么基于该变量的任何样式，在容器外部都会动态解析为黑色，而在容器内部会动态解析为白色。
三、css变量命名规则
1、变量名前必须有两个连字符（–）
2、自定义属性名是大小写敏感的，–my-color 和 –My-color 会被认为是两个不同的自定义属性。
四、css变量的使用方法
1、通过var()函数来读取变量。语法如下:
var(custom-property-name, value)
1）name (必需) 变量名（以两条破折号开头）。
2）value (可选) 表示变量的默认值。如果该变量不存在，就会使用这个默认值。
变量名称必须以两个破折号（–）开头，且区分大小写！
2、使用方法：
element { background-color: var(--main-bg-color);}3、变量也可以使用在变量声明中：
:root { --primary-color: #eee; --primary-bg-color: var(--main-bg-color);}变量值只能用作属性值，不能用作属性名。
五、js操作css变量
在js代码中，我们可能需要读取css变量的值，其方法如下：
const root = document.querySelector(":root");// 设置 CSS 变量root.style.setProperty("--main-bg-color", "red");// 读取 CSS 变量const computedStyle = getComputedStyle(root);const mainBgColor = computedStyle.getPropertyValue("--main-bg-color");console.log(mainBgColor);// 删除 CSS 变量root.style.removeProperty("--main-bg-color");六、最后总结
1、利用这种技术，是不是可以方便的提取网页主题等特性，实时切换网站主题？实现css变量换肤功能。
2、虽然大部分浏览器厂商都支持了css变量特性，但是某些厂商和版本依然不支持，所以我们在使用这个特性的时候，应该准备一个回退方案，类似下面的例子（相当于设置了一个默认值）：
color: black;color: var(--main-color)
3、css变量的优势可以为我们带来一些预处理器的便利，并且不需要额外的编译。