如何灵活使用css变量-轻识

点击上方“前端简报”，选择“设为星标”

第一时间关注技术干货！

在项目开发的过程中，有些css样式我们写成一样的，在后期维护起来特别不方便。举个栗子：项目主题的背景色和字体色调是蓝色的，而且项目已经到了一个版本在线上运行的时候，这个时候产品经理过来说我们这个项目下个版本背景和字体颜色要换成淡紫色，最迟明天要部署版本。这个时候就开始打开项目全局搜索有多少个地方涉及到这些属性，一个一个的拼命改。早知如此何必当初，是我的格局小了还是产品经理欠揍呢

我们一般可以把公共的样式作为变量在其他需要的地方，写上变量名即可，后期维护起来只需要修改设置公共变量的value值即可，节省大量重复工作，去打打游戏，炒炒股票不香吗？

在css中我们使用变量一般都是在同类的后缀名文件下使用，举个栗子：

$bgColor:blue

div{
  background:$bgColor
}

那么如何将css变量在.js,.vue.....文件中使用呢?

$pink: #E65D6E;
$yellow:#FEC171;

:export {
    yellow:$yellow;
    pink:$pink
  }

vue文件中

<template>
  <div :style="custom">测试</div>
</template>
<script>
import variables from '@/assets/style/variables.scss'
export default {
  computed: {
    custom() {
      return {
        color: variables.pink,
        background: variables.yellow
      }
    }
  }
}
</script>
<style scoped >
div{
    width: 300px;
    height: 300px;
    margin: auto;
    text-align: center;
    line-height:300px ;
}
</style>

直接引入variables文件获取到变量对象即可