vue中scss样式管理

1. scss中使用:export抛出样式给组件参数使用

global.scss中：

$spc-head-bg: #545c64;
$spc-head-hover-bg: #434A50;
$white: white；
:export {
spcHeadBg: $spc-head-bg;
spcHeadHoverBg: $spc-head-hover-bg;
white: $white;
}
...

 组件中：

<el-menu
:default-active="activeMenu"
mode="horizontal"
router
@select="handleSelect"
:background-color="variables.spcHeadBg"
:text-color="variables.white"
:active-text-color="variables.spcHeadActiveColor">
<spc-menu-item
v-for="(item,index) in currentRouters"
:key="'spc'+index"
:item="item"/>
</el-menu>
...
import variables from '@/assets/global.scss'
...
computed: {
variables () {
　　return variables
}
}

 

2.Sass @mixin 与 @include
@mixin允许重复使用某样式，@include用于引入该样式
在global.scss中定义：

@mixin center(){
　　display: flex;
}

在组件的css中引入：

@include center;