在项目开发中如何灵活使用css变量

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

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

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

 
 
 
 
  
  
  
  
$bgColor:blue 
  
  
  
  
 
  
  
  
  
div{ 
  
  
  
  
  background:$bgColor 
  
  
  
  
} 
 
 
 

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

 
 
 
 
  
  
  
  
$pink: #E65D6E; 
  
  
  
  
$yellow:#FEC171; 
  
  
  
  
 
  
  
  
  
:export { 
  
  
  
  
    yellow:$yellow; 
  
  
  
  
    pink:$pink 
  
  
  
  
  } 
 
 
 

vue文件中

 
 
 
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
div{ 
  
  
  
  
    width: 300px; 
  
  
  
  
    height: 300px; 
  
  
  
  
    margin: auto; 
  
  
  
  
    text-align: center; 
  
  
  
  
    line-height:300px ; 
  
  
  
  
} 
  
  
  
  
 
 
 
 

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

网页题目：在项目开发中如何灵活使用css变量
网址分享：http://www.shufengxianlan.com/qtweb/news1/322101.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联