关于scss的写法以及setting公共变量的提取

Settings层代码实现

SASS的介绍

定义一些公共变量

公共变量:颜色、边框、字体大小、阴影、层级..



变量的写法

$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层的公共变量的提取 按照出现次数最多方法进行一个培训

次数最多的排第一位

然后再通过index.scss 进行一个导入导出的曝光



然后在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";`

        },

      }

    }

  }