前言

在项目开发过程中使用UI组件库也经常需要手动编写元素样式，若使用原生CSS开发，效率会大幅降低且容易怀疑人生（写重复的样式很烦躁），所以本文介绍的是预编译Scss常见的姿势。

嵌套

Scss支持样式嵌套 省去了古老的方式：

//82年古老的 
.a{
    color:red;
}
.a .a_main{
    border:1px solid red;    
}
//使用了Scss现代版
.a{
    color:red;
    .a_main{
        border:1px solid red;
    }
}

作为front end 会更心仪后者。

公共变量声明

在Scss中可以声明公共变量，也就是说变量值可复用。
Vue项目的公共变量配置步骤：
1.项目根目录 vue.config.js 文件中（没有该文件的自建即可）：

 module.exports = {
    css: {
        // css预设器配置项
        loaderOptions: {
            scss: {
                additionalData: `@import "~@/assets/scss/base.scss";` //分号一定不能少，路径要正确
            }
        }
    },
}

2.在响应的路径中创建scss文件 (base.scss):

$background: #142032; //公共背景色
$trendBackground: #172841; //公共模块背景色
$colorBg: #3f5779;

3.重启项目即可在所有Vue文件里全局引用了

A.vue:
<style lang='scss'>
   .Card{
       background:$background; //预编译后$background为#142032    
   }

</style>

@mixin

@mixin 可以理解成封装函数，谁想用就引入

@mixin box {
background: #ffff00;
border:1px solid #ffff00;
color:blue;
}
.bigBox {
    @include box;
    height:200px;
    width:200px;
}
.smallBox {
    @include box;
    height:50px;
    width:50px
}

@extend

@extend 继承选择的元素样式 例如：

<div class='error'></div>
<div class='errorSearch'></div>

.error{
    width:10px;
    height:10px;
    background:red;
}
.errorSearch{
    @extend .error; 
    border:1px solid red;
}

如此一来 .errorSearch就继承了.error 的样式，元素类名好看多了 代码量也少了

@function

@function 计算属性的功能

@function r($size){
    @return $size / 144 * 1rem;
}
//引用
p{
    width:r(600);
}
//编译后
p {
  width: 4.1666666667rem;
}

@import

@import 引入公共文件,但弊端是速度慢，只有执行到@import才会去下载响应的Css文件，这会导致浏览器加载速度降低。

@import '../assets/scss/style.scss';

p{
    color:red;
}

小结

Scss大法大大提升了样式开发效率，节省了很多重复代码，也治愈了front end 的心灵，反正我是受不了重复、复杂、（明明可以简化代码量却繁多的现象）。
以上是个人对于日常开发中常用到的多个姿势小结。