CSS3原生变量使用

1. 项目需求

由于对多个老工程需要采用统一的样式风格统一，需要约定好一个css的变量文件，各个项目都可以随时引入但是又无需适配自己的预处理器。此时css的原生变量就是最好的选择了，这样无论使用less还是sass的都可以使用同一份全局css变量配置文件，并且对于之前未使用全局变量配置的less工程也无需再安装新的包来做变量处理。

2. CSS3原生变量是什么

其实就是和less中的变量一样的，定义变量在使用时候引用，便于更好的管理css，感觉有朝一日css也会拥有函数...只是定义变量的格式要求必须是--开头，因为@等标志已经被其他预处理占用了。

再看兼容性，不用IE的话也没有任何问题。

CSS中原生的变量定义语法是：--*，使用语法是：var(--*)，其中*表示我们的变量名称，这里使用英文名称，中文名称的话我试过会有兼容性问题。下面就是最简单使用方法，在全局定义一个颜色，这样在任何一个css样式中都可以引用此变量。

:root{
  --main-color: #008080;
}

body{
  backgroud-color: var(--main-color);
}

3. 工程实践

我目前工程使用less，可以无痛引入一个css变量文件，varables.css，在其中定义需要使用的各类全局变量。

:root{
  --main-color: #008080;
  --main-font-size: 16px;
}

然后在入口App.vue中引入css变量文件：

<style lang="less">
@import './styles/variables.css'
</style>

之后就可以在任何组件的less或者css处引用css变量。

4. 更多妙用

至此，我的css变量需求已经满足了，但是细看了下这个功能确实很不错，有很多其他的好处，最厉害的就是可以和js或者响应式布局结合使用，在某些情况下直接修改css变量的值实现动态样式变化。参考了张鑫旭大神。

<div id="box">
    <img src="mm.jpg" style="border: 10px solid var(--color);">
</div>

box.style.setProperty('--color', '#cd0000');