SASS使用指南（三）混合器传参我们既然说了，混合器就像一个 “函数” 一样，那么就一定可以像 “函数” 一样传递参数

这是我参与8月更文挑战的第15天，活动详情查看：8月更文挑战

混合器传参

我们既然说了，混合器就像一个 “函数” 一样，那么就一定可以像 “函数” 一样传递参数

和 “函数” 的使用方式一样，在定时的时候是 “形参”，在调用的时候是 “实参”

// 定义混合器
@mixin my_transition($pro, $dur, $delay, $tim) {
    -webkit-transition: $pro $dur $delay $tim;
    -moz-transition: $pro $dur $delay $tim;
    -ms-transition: $pro $dur $delay $tim;
    -o-transition: $pro $dur $delay $tim;
    transition: $pro $dur $delay $tim;
}

使用这个混合器的时候传递 “实参”

div {
    width: 100px;
    height: 100px;

    @include my_transition(all, 1s, 0s, linear);
}

编译结果

div {
    width: 100px;
    height: 100px;
    -webkit-transition: all 1s 0s linear;
    -moz-transition: all 1s 0s linear;
    -ms-transition: all 1s 0s linear;
    -o-transition: all 1s 0s linear;
    transition: all 1s 0s linear;
}

写了多少个 “形参”，那么调用的时候就要传递多少个 “实参”
不然会报错的

参数默认值

我们在定义混合器的时候，也可以给一些参数写一些默认值

这样一来，就可以不传递 “实参” 了

// 设置一些带有默认值的参数
@mixin my_transition($dur: 1s, $pro: all, $delay: 0s, $tim: linear) {
    -webkit-transition: $dur $pro $delay $tim;
    -moz-transition: $dur $pro $delay $tim;
    -ms-transition: $dur $pro $delay $tim;
    -o-transition: $dur $pro $delay $tim;
    transition: $dur $pro $delay $tim;
}

使用的时候，如果你不传递，那么就是使用默认值

div {
  width: 100px;
  height: 100px;

  // 使用的时候，只传递一个，剩下的使用默认值
  @include my_transition(2s);
}

编译结果

div {
    width: 100px;
    height: 100px;
    -webkit-transition: 2s all 0s linear;
    -moz-transition: 2s all 0s linear;
    -ms-transition: 2s all 0s linear;
    -o-transition: 2s all 0s linear;
    transition: 2s all 0s linear;
}

继承

在 sass 里面使用继承可以大大的提高开发效率
其实继承很简单，就是把之前写过的选择器里面的内容直接拿过来一份
```
div {
    width: 100px;
    height: 100px;
    background-color: pink;
}
```
这个是之前写过的一个规则样式表
接下来我要写另外一个样式了，发现我要写的一些内容和之前这个 div 一样，并且还有一些我自己的内容

那么我就可以把这个样式表先继承下来，再写我自己的内容就好了

p {
      @extend div;

      font-size: 20px;
      color: red;
}

编译结果

div, p {
    width: 100px;
    height: 100px;
    background-color: pink;
}

p {
    font-size: 20px;
    color: red;
}

注释

在 scss 文件中的注释分为几种

编译的时候不会被编译的注释

// 我是一个普通注释，在编译的时候，我就被过滤了

编译的时候会被编译的注释

/* 我在编译的时候，会被一起编译过去 */

强力注释

/*! 我是一个强力注释，不光编译的时候会被编译过去，将来压缩文件的时候也会存在 */

导入文件

我们刚才学过了定义变量，定义混合器
而这两个内容在定义过以后，如果没有使用，是不会被编译出内容的

所以我们可以把变量单独写一个文件，混合器单独写一个文件，然后直接导入后使用

// 我是 variable.scss
$w: 100px;
$h: 200px;
$c: pink;

// 我是 mixin.scss
@mixin my_transition($dur: 1s, $pro: all, $delay: 0s, $tim: linear) {
    -webkit-transition: $dur $pro $delay $tim;
    -moz-transition: $dur $pro $delay $tim;
    -ms-transition: $dur $pro $delay $tim;
    -o-transition: $dur $pro $delay $tim;
    transition: $dur $pro $delay $tim;
}

@mixin radius {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

然后在我们的主要文件中把这个两个文件导入进来就行了

// 我是 index.scss
@import './variable.scss';
@import './mixin.scss';

div {
    width: $w;
    height: $h;
    background-color: $c;

    @include radius;
}

h1 {
    @include my_transition;
}

编译结果

div {
    width: 100px;
    height: 200px;
    background-color: pink;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

h1 {
    -webkit-transition: 1s all 0s linear;
    -moz-transition: 1s all 0s linear;
    -ms-transition: 1s all 0s linear;
    -o-transition: 1s all 0s linear;
    transition: 1s all 0s linear;
}