-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
小职
2021-03-15
来源 ：前端先锋
阅读 1014
评论 0
摘要：本文主要介绍了前端入门之css变量在项目开发中的应用，通过具体的内容向大家展现，希望对大家web前端CSS的学习有所帮助。
本文主要介绍了前端入门之css变量在项目开发中的应用，通过具体的内容向大家展现，希望对大家web前端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文件获取到变量对象即可
我是小职，记得找我
✅ 解锁高薪工作
✅ 免费获取学习教程，开发工具，代码大全，参考书籍
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
