sass 混入 （@mixin 与 @include的使用）

Sass 混入（mixin ）

---

作者： 李俊才

邮箱 ：291148484@163.com

CSDN 主页：https://blog.csdn.net/qq_28550263?spm=1001.2101.3001.5343

本文地址：https://blog.csdn.net/qq_28550263/article/details/123350343

相关文章推荐：

• sass 自定义函数
• Sass 自带函数总结

---

目 录

---

1. 混入的概念

2. 混入的使用

• 2.1 混入的基本使用
• 2.2 向混入传递变量
• 2.3 使用默认参数
• 2.4 使用可变参数

---

1. 混入的概念

在传统的普通CSS语法中，为了描述某个目标的样式我们需要对我们选择的目标分别描述他们的样式，很多时候我们的工作是重复进行的，因此开发者们一直致力于寻找一个能够尽可能地降低重复率的方式。作为一款优秀的预处理器，Sass提供了这样的功能，它就是混入（mixin）。

Sass/Scss 混入（mixin）类似于JavaScript一个自定义的函数。在JavaScript等编程语言中的函数使我们能够定义一个重复使用某一具有相同功能的代码块，而在Sass中的混入（mixin）则让我们能够定义一个可以在整个样式表中重复使用的样式。

2. 混入的使用

2.1 混入的基本使用

Sass 为我们提供了@mixin指令用于定义混入，就像JavaScript为我们提供了function关键字用于定义函数一样。其语法格式如下：

@mixin minxin-name(param1, param2, ...){
  // your styles...
}

和调用JavaScript函数不一样的是，Sass中的混入在定义后不是仅仅个给出一个混入名就可以了，准确的说这里不叫作调用，而叫做包含。也就是说使用混入指令@mixin定义好的一个混入，要想被包含在另一处位置。实现包含的功能需要使用到另外一个指令，那就是包含指令@include。

具体使用以一个例子来说明：

例如：

@mixin mybox-base {
  width: 60px;
  height: 26px;
}

.mybox {
  @include mybox-base;
  color:#1a1a1a;
  background-color:#e4e4e4
}

.mybox-critical {
  @include mybox-base;
  color:#fbff00;
  background-color:#ff3636
}

.mybox-warning {
  @include mybox-base;
  color:#00a09d;
  background-color:#d6da00
}

这里只定义了一个混入，也就是mybox-base，我们在下面三处包含了它。如果你本地安装了sass编译器，可以使用形如sass xxx.sass:xxx.css的命令将它编译成CSS文件，编译后的结果如下：

.mybox {
  width: 60px;
  height: 26px;
  color: #1a1a1a;
  background-color: #e4e4e4; }

.mybox-critical {
  width: 60px;
  height: 26px;
  color: #fbff00;
  background-color: #ff3636; }

.mybox-warning {
  width: 60px;
  height: 26px;
  color: #00a09d;
  background-color: #d6da00; }

/*# sourceMappingURL=test.css.map */

可以看出，@include指令将我们定义的混入中的样式添加到使用包含的位置处了。

2.2 向混入传递变量

在2.1节的例子中我们没有使用参数。然而与函数一样的是，sass中的混入也可以使用参数，这些参数可以包含了颜色、像素、数值等等信息。
下面我们给一个传递变量的例子：

// 允许传入字体颜色与背景色两个变量
@mixin mybox-base($font-color, $bg-color) {
  width: 60px;
  height: 26px;
  color: $font-color;
  background-color: $bg-color;
}

.mybox {
  @include mybox-base(#1a1a1a, #e4e4e4);
}

.mybox-critical {
  @include mybox-base(#fbff00, #ff3636);
}
  
.mybox-warning {
  @include mybox-base(#00a09d, #d6da00);
}

将其编译成CSS后的内容与之前不传参数是一样的：

.mybox {
  width: 60px;
  height: 26px;
  color: #1a1a1a;
  background-color: #e4e4e4; }

.mybox-critical {
  width: 60px;
  height: 26px;
  color: #fbff00;
  background-color: #ff3636; }

.mybox-warning {
  width: 60px;
  height: 26px;
  color: #00a09d;
  background-color: #d6da00; }

/*# sourceMappingURL=test.css.map */

但是从写法上看就比之前更加简洁了，因为我们没有在使用@include指令以包含的位置反复使用css关键字定义字体色和背景色，而是仅仅传入了颜色值。

2.3 使用默认参数

上面我一经向大家介绍了 sass 可以使用参数，这里我还要告诉各位，sass 不仅可以使用参数，而且还可以使用默认参数。在上面的应用案例中mybox类完全就可以使用默认参数而不需要再次传入了，这时我们可以这样去定义混入：

@mixin mybox-base($font-color:#1a1a1a, $bg-color:#e4e4e4) {
  width: 60px;
  height: 26px;
  color: $font-color;
  background-color: $bg-color;
}

对应的，mybox类就不需要再传入参数了：

.mybox {
  @include mybox-base;
}

2.4 使用可变参数

JS函数的可变参数也被借鉴到混入中来。所谓 可变参数指的是再使用前我们不知道传入参数的个数，这时使用... 以表示可以传入任意多个参数。熟悉CSS的读者都知道，当我们指定一些属性值时，不一定需要指定所有的属性，未指定部分可以让系统默认分配。如border、background等等。

例如：

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

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

这个混入中一次就传入了多个属性值，然而并不是我们在每次引入该混入时都需要指定同样个数的属性值的。