项目安装sass第三方插件，详细步骤如下：

1-2.变量引用：

凡是css属性的标准值（比如说1px或者bold）可存在的地方，变量就可以使用。css生成时，变量会被它们的值所替代。之后，如果你需要一个不同的值，只需要改变这个变量的值，则所有引用此变量的地方生成的值都会随之改变。

只需要改变这个变量的值，则所有引用此变量的地方生成的值都会随之改变

1.安装sass插件：

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

写法嵌套:

写法二:

 $highlight-color: #F90;
 .selected {
  border: 1px solid $highlight-color;
 }

//编译后

1-3.嵌套属性

属性也可以进行嵌套。尽管编写属性涉及的重复不像编写选择器那么糟糕，但是要反复写border-style border-width border-color

border-style     border-width      border-color

写法：

nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

特性：属性和选择器嵌套是非常伟大的特性，因为它们不仅大大减少了你的编写量，而且通过视觉上的缩进使你编写的样式结构更加清晰，更易于阅读和开发。

混合器:
如果你的整个网站中有几处小小的样式类似（例如一致的颜色和字体），那么使用变量来统一处理这种情况是非常不错的选择。但是当你的样式变得越来越复杂，你需要大段大段的重用样式的代码，独立的变量就没办法应付这种情况了。你可以通过sass的混合器实现大段样式的重用。

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

混合器使用@mixin标识符定义,@include调用会把混合器中的所有样式提取出来放在@include被调用的地方。如果像下边这样写:

把需要用到这个样式的地方,写入这个class名（notice）
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

浏览器会编译成:

.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

如果你只是为自己写一些混合器，这并没有什么大的用途，但是当你使用一个类似于Compass的库时，你会发现，这是提供样式的好方法，原因在于你可以选择是否使用这些样式。

1.混合器中不仅可以包含属性，也可以包含css规则，包含选择器和选择器中的属性，如下代码:

@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}

2.当一个包含css规则的混合器通过@include包含在一个父规则中时，在混合器中的规则最终会生成父规则中的嵌套规则。举个例子，看看下边的sass代码，这个例子中使用了no-bullets这个混合器：

ul.plain {
  color: #444;
  @include no-bullets;
}

3.sass的@include指令会将引入混合器的那行代码替换成混合器里边的内容。最终，上边的例子如下代码:

ul.plain {
  color: #444;
  list-style: none;
}
ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

学习官网地址如下：https://www.sass.hk/guide/