为何Post CSS Variables会将CSS中的变量替换为实际值？

这是这个工具的核心设计目的——PostCSS CSS Variables（背后是postcss-custom-properties插件）本来就是用来做CSS变量兼容性降级的。

具体原因可以拆成两点来看：

• 工具的定位：它是编译工具，而非保留变量的预览工具。早期很多旧浏览器（比如IE11）不原生支持CSS自定义属性（也就是你说的变量），这个工具的作用就是把带变量的CSS转换成所有浏览器都能直接识别的静态值，让样式在旧环境里也能正常生效。默认配置下，它就会把变量全部替换成实际值。
• 关于保留变量：如果你希望输出的CSS里保留原变量，需要开启工具的preserve配置项（默认是关闭的）。开启后，工具会同时保留原变量定义和替换后的静态值，兼顾现代浏览器的变量特性和旧浏览器的兼容性。不过这个在线playground可能没提供配置入口，所以只能默认执行替换操作。

另外补充个新手知识点：现在Chrome、Firefox、Edge这些主流现代浏览器已经完全原生支持CSS变量了，如果你只是在现代浏览器环境下学习开发，其实不需要这个工具，直接写变量就能生效。

内容的提问来源于stack exchange，提问作者Moises Ruelas