vue 设置css通用的颜色变量(主题色)
1.首先在目录“src/assets”下新建两个文件:“base.css”(基本样式)和“config.css”(颜色变量存放位置,方便随时修改主题色)。2.config.css文件中,定义变量如:/*主题色*/$themeColor:#45b795;$borderColor: #EEE;// 背景色$bgColor:#FAFAFAFA;// 按钮$btn-red:#ef5728;3.base.c
·
1.首先在目录“src/assets”下新建两个文件:“base.css”(基本样式)和“config.css”(颜色变量存放位置,方便随时修改主题色)。
2.config.css文件中,定义变量如:
/*主题色*/
$themeColor:#45b795;
$borderColor: #EEE;
// 背景色
$bgColor:#FAFAFAFA;
// 按钮
$btn-red:#ef5728;
3.base.css(基本样式),引入如下:
@import "./config.css";
html,body{width:100%;height:100%;}
body {font-size:.3rem;background-color: $bgColor;}
a{text-decoration: none;}
#app {-webkit-font-smoothing: antialiased;}
.box{display: flex;position:relative;}
.box-f1{flex: 1;}
.box-ac{align-items: center}
.box-jc{justify-content: center}
.box-ver{flex-direction: column}
.w-p100{width:100%;}
.h-p100{height:100%}
.hide{display: none !important;}
核心代码:“background:$bgColor;”。
4.最后只需要在app.vue中引入一次“base.css”文件就可以了,如:
<template>
<div id="app">
<router-view class="router-view"></router-view>
</div>
</template>
<script>
export default {
name: 'app',
mounted () {
}
}
</script>
<style lang="scss">
@import './assets/config.css';
</style>
更多推荐
已为社区贡献25条内容
所有评论(0)