Settings層代碼實(shí)現(xiàn)
SASS的介紹
定義一些公共變量
公共變量:顏色、邊框、字體大小、陰影、層級(jí)..
變量的寫法
$col:#666;
.text1?{
color:?$col;
}
.text2?{
color:?$col;
}
.text3?{
color:$col;}
//嵌套寫法
main?{
color:#00ff00;
.redbox?{
background-color:?#ff0000;}
}
#main?{
color:?#00ff00;}
#main?.redbox{
background-color:#ff0000;
}
//?mixin混合寫法
@mixin?large-text{color:#fff;}
.page-title?{
@include?large-text;
padding:?4px;
}
.page-title?{
color:#fff;padding:?4px;}
//function的寫法
@function?grid-width($n){
??@return?$n?*?100px;
??}
#sidebar?{
???width:?grid-width(2);
}
#sidebar?{
width:200px;
}
setting層的公共變量的提取 按照出現(xiàn)次數(shù)最多方法進(jìn)行一個(gè)培訓(xùn)
次數(shù)最多的排第一位
然后再通過(guò)index.scss 進(jìn)行一個(gè)導(dǎo)入導(dǎo)出的曝光
然后在vue.config
然后新建vue.config.js
//?vue.config.js
//?vue.config.js
module.exports?=?{
????css:?{
??????loaderOptions:?{
????????scss:?{
????????????prependData:?`
????????????@import?"@/style/settings/var.scss"
????????????@import?"@/style/tools/_sassMagic.scss";`
????????},
??????}
????}
??}
