关于css: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');