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
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);