首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >如何灵活使用css变量

如何灵活使用css变量

作者头像
小丑同学
发布2021-03-25 11:33:25
1.4K0
发布2021-03-25 11:33:25
举报
文章被收录于专栏:小丑的小屋小丑的小屋

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

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2021-03-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 小丑的小屋 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档