内容摘要：在项目开发的过程中，有些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文件获取到变量对象即可