1、在使用 Scss 之前，我们要知道 Sass、Scss 有什么不同？

Scss 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 Scss 文件，官方解释。

大家都知道 Scss 是一个 css 预处理语言。 在这里要明确一个概念，什么是 css 预处理语言呢?

简单来说 CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

基本概念理解清楚了，Scss 有这么多好用的功能，但是我要如何把 Scss 用到我的项目当中呢？

2、安装和使用

Scss 需要经过编译为 css 才能被浏览器识别，所以我们这里用到了工程化工具 Webpack 来进行编译。

首先安装 node-sass、sass-loader。

npm install node-sass sass-loader --save-dev

创建一个App.scss文件，接着在入口文件中引入。

import './App.scss';

后面我们将在 App.scss 中编写 scss 代码。

3、语法介绍

1、注释

1.1、单行注释

单行注释，在编译成css的时候，不会被编译（不会出现在编译出的CSS文件中）

//  这是单行注释

1.2、多行注释

多行注释，在编译成css的时候，会被编译（注释内容将出现在已编译的CSS文件中。）

/* 这是多行注释 */

1.3、特殊多行注释

$tip:"这是多行特殊注释"
/*
    #{$tip}
*/

编译后

2、变量

2.1、定义

scss定义变量很简单，以 $ 开头就行，就好像js中的 var,let...

$color:#fff;
$color2: blue;

2.2、使用

使用也非常简单，直接把定好的变量拿过来用就可以

body{
  color:$color;
  background-color:$color2;
}

2.3、作用域

全局作用域
在最外定义的变量，在哪里都可以用

$color:yellow;
body{
  color:$color;
}
p{
  color:#color
}

局部作用域

body{
  $color:yellow;
  color:$color;
}
// 如果想在p中，用在body定义好的$color变量是用不到的，编译会报错
p{
  background-color:$color;
}

特殊的全局作用域

// 假如非要在body里面定义一个变量，又想在body外调用，那就只能加上！global了
body{
  $color:yellow !global;
  color:$color;
}
div{
  color:$color;
}

3、混合的使用（@mixin 与 @include）

前面我们已经知道 sass 中的变量了，但是变量能记录的毕竟只是一个值，顶多把一个属性的所有值全部记录进去，比如这样：

$primary-border:1px solid #899;
.box{
  border:$primary-border;
}

这样固然可以让 box 这个选择器很轻松地获得一个边框样式，但是如果我有大量公用的样式呢？比如文字颜色，字体大小这些东西其实都可以统一起来，那这时候如果我们再一条一条的去存变量，然后再去使用的话就不太方便了。混合（Mixin）就是用来解决这个问题的，它可以把一整段代码打包，然后像一个变量一样在其他地方使用。

混合在官方的解释是这样的：混合指令（Mixin）用于定义可重复使用的样式，避免了使用无语意的 class。混合指令可以包含所有的 CSS 规则，绝大部分 Sass 规则，甚至通过参数功能引入变量，输出多样化的样式。

3.1、声明一个函数（@mixin）

使用 @mixin 指令声明一个函数，看一下自己的css文件，有重复的代码片段都可以考虑使用混合器将他们提取出来复用。

@mixin border-radius{
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color:red;
}

混合器作用域内的属性都是return的值，除此之外，还可以为函数传参数。

@mixin get-border-radius($border-radius,$color){
    -moz-border-radius: $border-radius;
    -webkit-border-radius: $border-radius;
    border-radius: $border-radius;
    color:$color;
}

也可以设置混合器的默认值。

@mixin get-border-radius($border-radius:5px,$color:red){
    -moz-border-radius: $border-radius;
    -webkit-border-radius: $border-radius;
    border-radius: $border-radius;
    color:$color;
}

3.2、函数使用（@include）

使用函数的关键字为 @include

.container {
    border:1px solid #aaa;
    @include get-border-radius;         //不传参则为默认值5px
    @include get-border-radius(10px,blue);   //传参
}
/*多个参数时，传参指定参数的名字，可以不用考虑传入的顺序*/
.container {
    border:1px solid #aaa;
    @include get-border-radius;         //不传参则为默认值5px
    @include get-border-radius($color:blue,$border-radius:10px);   //传参
}

我们可能会想到，直接将混合器写成一个 class 不就行了，但是写成一个 class 的时候是需要在 html 文件中使用的，而使用混合器并不需要在html文件中使用 class 既可达到复用的效果。

3.3、可变参数

有时，不能确定一个混入（mixin）或者一个函数（function）使用多少个参数，这时我们就可以使用 ... 来设置可变参数。

@mixin box-shadow($shadows) {
    -moz-box-shadow: $shadows;
    -webkit-box-shadow: $shadows;
    box-shadow: $shadows;
}
.shadows {
    @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

3.4、在项目中的应用

/**
  * 文本溢出隐藏
  * $rowCount：显示行数，默认为：1（最小为：1）
  */
@mixin ellipsis($rowCount: 1) {
  // 单行文本溢出
  @if $rowCount <=1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  // 多行文本溢出
  @else {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    word-break: break-all; // 允许在单词内换行。
    -webkit-line-clamp: $rowCount; // 限制在一个块元素显示的文本的行数。
    -webkit-box-orient: vertical; // 设置或检索伸缩盒对象的子元素的排列方式
  }
}

// flex 布局复用
@mixin flex ($direction: row, $justify-content: flex-start, $align-items: flex-start, $flex-wrap: nowrap) {
    display: flex;
    flex-direction: $direction;
    justify-content: $justify-content;
    align-items: $align-items;
    flex-wrap: $flex-wrap;
}

// 背景图片
@mixin bgImg($w:0,$h:0,$img:'',$size:contain) {
  display: inline-block;
  width: $w;
  height: $h;
  background: url($img) no-repeat center;
  background-size: $size;
}

/**
    * 四边 0.5px 线的实现
    * $color：颜色，默认为：#000
    * $border-radius：圆角，默认为：0px
    */
@mixin border($color: #000, $border-radius: 0px) {
  & {
    position: relative;
  }

  &:after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    transform: scale(0.5);
    transform-origin: left top;
    box-sizing: border-box;
    border: 1px solid $color;
    border-radius: $border-radius;
    pointer-events: none; //穿透伪元素点击
  }
}

/**
    * 单边 0.5px 线的实现
    * $color：颜色，默认为：#000
    * $type：圆角，默认为：left
    */
@mixin border-1px($color: #000, $type: left) {
  & {
    position: relative;
  }

  &:after {
    content: '';
    position: absolute;
    background: $color;
    transform-origin: 0 0;
  }

  @if $type==left {
    &:after {
      top: 0;
      left: 0;
      width: 1px;
      height: 100%;
      transform: scaleX(0.5);
    }
  }

  @else if $type==top {
    &::after {
      top: 0;
      left: 0;
      width: 100%;
      height: 1px;
      transform: scaleY(0.5);
    }
  }

  @else if $type==right {
    &::after {
      top: 0;
      right: 0;
      width: 1px;
      height: 100%;
      transform: scaleX(0.5);
    }
  }

  @else if $type==bottom {
    &::after {
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      transform: scaleY(0.5);
    }
  }
}
... ...

最后

以上是本期分享内容，希望今天的分享能帮助到大家。