@mixin 和 @include

@minxin为混入，实际上可以理解为一个通用的变量，这个变量会将自身里面的属性全部return出去，和function一样，你调用我，我就给你返回一个内容。

定义一个混入

@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}

混入的名字为：important-text，并且这个名字使用了连接符号-，和class的命名一样，并且sass的连接符除了这个还可以使用下划线_，也就是可以写成：important_text

调用混入

body {
  @include important-text;
  background-color:red;
}

使用@include 后面接混入的名称，然后编译后得到：

body {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
  background-color:red;
}

这样的话让我想起了一个使用场景：

有时候我们需要对某一个元素，比如h2标题元素，我们要让他不能换行，并且超出部分...表示，一般来说我们要写三个css属性。

white-space: normal;
text-overflow: ellipsis;
overflow: hidden;

这三个属性标准的做法就是写一个通用的class，比如no-break，我们利用这个class给需要不换行的元素加上这个。

.no-break {
  white-space: normal;
  text-overflow: ellipsis;
  overflow: hidden;
}

虽然这样很好，但是有时候一个元素class非常多的话反倒很麻烦了，不利于开发者阅读，我们可以利用混入的方式，定义一个变量然后调用，这样减少了class的使用。

混入中使用混入

@mixin special-text {
  @include important-text;
  @include link;
  @include special-border;
}

我们可以在混入中在调用混入。看使用需求

混入使用变量

混入开头就说了，它就像一个function一样，所以也可以传入参数，参数有两种传参的方式，就和function一样，支持固定参数和不固定参数。

固定参数

创建混入

@mixin bordered($color, $width) {
  border: $width solid $color;
}

调用混入

.body {
  @include bordered(blue, 1px);  // 调用混入，并传递两个参数
}

我们可以传两个参数进去，注意你混入的参数变量名必须$开头。

并且这个混入可以传入不同的参数，在不同的css中使用。

不固定参数

有时候我们并不清楚要传递多少参数，比如box-shadow，我们可能只有一层，也可能多层，每层阴影都用，逗号分隔，如果固定参数传递，那你根本做不到要求，所以sass支持不固定参数。

这个就和function的arguments参数类似，但是arguments他是一个数组，而sass中，它就是参数本身，也就是一个变量等于所有参数。

创建混入

@mixin box-shadow($shadows...) {
  box-shadow: $shadows;
}

调用混入

.body {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);  
}

我们可以看到，在创建混入参数时，在后面了加了三个...；这三个点用于表示可变参数，也就是不固定参数，该参数等于所有传进来的值。

利用混入快速创建浏览器前缀

写css我们可能会遇到需要书写浏览器前缀的时候，虽然现在用webpack可以自动添加前缀，但是开发一些其他的不用打包工具的站点，添加前缀会很麻烦，因为他会重复很多遍相同的代码。

我们可以利用混入传参的特性，实现快速创建浏览器前缀

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

.body {
    @include transform(rotate(20deg));
}

这样不就是一劳永逸了。