一文学会解析sass预编译器（超全详解）

前言：首先我们先讲一下什么是sass 以及 sass 和 scss 有什么区别？和我们为什么要使用sass。

   1. sass是css的一种开发工具，是css的预处理器，css的扩展语言。

   2. 至于sass和scss有什么区别，问出这个问题首先就有点奇怪，就比如说一个人的小时候         和长大时候有什么区别，本质上还是一个人，sass版本3.0以前叫sass，版本3.0以后更          改名叫scss，所以它们本质上就是一个东西。

   3. scss扩展了css3，增加了规则、变量、混入、选择器、继承、内置函数等等特性。提高         代码的可维护性和可重用性。

一、sass的安装

   1.安装前使用node -v查看电脑上安装的node版本

   

   2.node、node-sass、sass-loader的版本需要对应，这里是node和node-sass版本对应链表

      官网地址：https://www.npmjs.com/package/node-sass

       

                        

     3.这里是基于博主的Node 14版本安装的sass-loader 和 node-sass

npm install sass-loader@7.3.1 node-sass@4.14.1 --save-dev

 二、sass的使用

  1.使用变量

      sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。

$width:100px
.container {
     width : $width
     height : 40px
}
// 编译后
.container {
     width : 100px
     height : 40px
}

       注意点：(搭配计算属性使用时避免直接使用变量,而是用下面这种方法编写变量) 

$width:100px
.container {
     width : calc(100% - #{$width})
     height : 40px
}
// 编译后
.container {
     width : calc(100% - 100px)
     height : 40px
}

  2.嵌套css规则

      在sass 中，你可以像俄罗斯套娃那样在规则块中嵌套规则块

.container {
     width ：100%;
     .container_son {
         width:50px;
         height:30px
     }
     p {
         color :red;
     }
}
// 编译后
.container { width ：100% }
.container, .container_son {  width:50px;  height:30px }
.container, p { color :red; }

     也可以利用父选择器的标识符&，最常见的一种情况就是当你为伪类链接之类的元素写 :hover这种伪类时

.container a {
     color : bule;
     &:hover { color : red }
}
// 编译后
.container a { color : bule }
.container a:hover { color : red }

  3.sass的导入

       sass有一个@import规则，它在生成css文件时就把相关文件导入进来，相比于css的@import规则，它无需发起额外的下载请求，而后者css的@import规则是只有执行到@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢。

// 假如要引用当前文件夹下面的theme.scss
@import './theme.scss'

      sass还支持嵌套导入，跟原生的css不同,sass允许@import命令写在css规则内。举例说明，有一个名叫theme的局部文件，内容如下：

test {

    background ： blue；

    color : white；

}

 然后我们想要把它导入到css规则内，如下所示

.theme { @import "test" }
// 编译结果
.theme {
  test {
    background ： blue；
    color : white；
  }
}

  4.静默注释

       sass另外提供了一种不同于css标准注释格式 /* .... */ 的注释语法，即静默注释。其内容不会出现在生成的css文件中。静默注释的语法跟 JavaScript 中的单行注释语法相同，他们以 // 开头，注释内容直到行末。

body {
  color: #333; // 这种注释内容不会出现在生成的css文件中
  padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

   5.混合器

        当你的样式变得越来越复杂，你需要大段大段地重用样式地代码，独立的变量就没办法应付这种情况了，你可以通过sass的混合器实现大段样式的复用。例如container 和 other  都想用一些相同的样式，就可以使用@mixin、@include 来实现复用了

@mixin copy {
  padding-bottom: 0;
  text-align: center;
  height: 30px
}
.container {
   @include copy;
   width: 20px
}
.other {
   @include copy;
   border-radius: 5px
}
// 编译后结果
.container {
   padding-bottom: 0;
   text-align: center;
   height: 30px
   width: 20px
}
.other {
   padding-bottom: 0;
   text-align: center;
   height: 30px
   border-radius: 5px
}

当有时相同属性不一定总得用相同的值，这时候就可以使用混合器传参：

@mixin copy ($size, $align, $height = 30px){ // $height = 30px给$height赋默认值
  padding-bottom: $size;
  text-align: $align;
  height: $height
}
.container {
   @include copy(0,center,30px);
   width: 20px
}
.other { //这里举例打乱传参顺序
   @include copy(
        $size: 0,
        $height: 20px,
        $align: center
   );
   border-radius: 5px
}
// 编译后结果
.container {
   padding-bottom: 0;
   text-align: center;
   height: 30px
   width: 20px
}
.other {
   padding-bottom: 0;
   text-align: center;
   height: 20px
   border-radius: 5px
}

6.继承

    使用sass的时候，基于Nicole Sullivan 面向对象的css的理念，选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过@extend语法实现，如下代码：

//通过选择器继承继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

      在上边的代码中，.seriousError 将会继承样式表中任何位置处为 .error 定义的所有样式。以class="seriousError"修饰的html元素最终的展示效果就好像是class="seriousError   error "。相关元素不仅会拥有一个3px宽的边框，而且这个边框将变成红色的，这个元素同时还会有一个浅红色的背景，因为这些都是在.error 里边定义的样式。

      .seriousError不仅会继承.error自身的所有样式，任何跟error有关的组合选择器样式也会被.seriousError以组合选择器的样式继承，如下代码：

//.seriousError从.error继承样式
.error a{  //应用到.seriousError a
  color: red;
  font-weight: 100;
}
h1.error { //应用到hl.seriousError
  font-size: 1.2rem;
}

关于@extend有两个要点你应该知道：

  1. 跟混合器相比，继承生成的css代码相对更少。因为继承仅仅是重复选择器，而不会重复属性，所以使用继承往往比混合器生成的css体积更小。如果你非常关心你站点的速度，请牢记这一点。

  2. 继承遵从css层叠的规则。当两个不同的css规则应用到同一个html元素上时，并且这两个不同的css规则对同一属性的修饰存在不同的值，css层叠规则会决定应用哪个样式。相当直观：通常权重更高的选择器胜出，如果权重相同，定义在后边的规则胜出。

7.循环以及条件判断

•  @if 、@else条件分支判断
•  @for $i from 1 through n  从1循环到n
•  @for $i from 1 to  n  从1循环到n
•  @each $i in $要遍历的集合
•  @while $i < n  从1循环到n （定义 $i :1，每次循环里面$i + 1)

  代码示例：

$flag: true  // 条件判断
@if( $flag == true ){
 .container {
    width: 50px
 }
}
@else{
  .container {
    width: 30px
 }
}

$btnColors: #409eff, #67c23a, #8b590f, #f54343, #6c6d71 // 定义一个集合
@for $i from 1 through leng($btnColors){
  .btn.type-#{$i} {
      $color: nth($btnColors, $i)
      background: $color
      color: #fff
      &:hover {
          background: red
      }
  }
}

 8.扩展（js动态设置属性值）

       通过修改bgColor的值，动态设置元素背景颜色。示例：

<div>
  <div class="box" :style = {'--color': bgColor}> </div>
</div>
<script>
   export default({
     name:'test',
     data(){
       return{
        bgColor:'red'
       } 
     }
   })
</script>
<style lang="scss">
  .box{
    background-color: var(--color);
  }
</style>

      以上这里对sass的使用基本上已经能够掌握绝大部分工作中的场景了，希望能对你有所帮助。下期我们继续总结less预编译器的写法。