SASS 如何使用传递变量的 Mixin？

SASS 是一个强大的 CSS 预处理器，它有许多便于开发的功能，其中之一就是 Mixin。Mixin 可以让你在样式表中复用代码块，以减少样式表的冗余代码。本文将介绍如何使用传递变量的 Mixin。

Mixin 的基本用法

Mixin 可以在样式表中定义以及调用，定义时需要使用 @mixin 关键字并命名，例如：

@mixin my-mixin {
  background-color: #fff;
  color: #000;
}

定义好 Mixin 后，可以在样式表中使用 @include 关键字来调用它，例如：

.my-class {
  @include my-mixin;
}

上面的代码会把 my-mixin 中定义的样式应用到 .my-class 中。

传递变量的 Mixin

除了可以把样式直接写在 Mixin 中以外，我们也可以把一些可变的属性值传递给 Mixin 进行使用，例如：

@mixin my-mixin($bg-color, $text-color) {
  background-color: $bg-color;
  color: $text-color;
}

上面的代码中，我们把 background-color 和 color 的值抽象成两个参数 $bg-color 和 $text-color，这样就可以在调用 my-mixin 时传入自定义的值，例如：

.my-class {
  @include my-mixin(#fff, #000);
}

上面的代码会把 $bg-color 替换成 #fff，把 $text-color 替换成 #000，从而生成下面的 CSS：

.my-class {
  background-color: #fff;
  color: #000;
}

使用默认值

有些时候我们会希望在调用 Mixin 时只传递一些参数，而其它参数使用默认值来进行替换。在 Mixin 定义时，我们可以使用 $default 参数指定默认值，例如：

@mixin my-mixin($bg-color: #fff, $text-color: #000) {
  background-color: $bg-color;
  color: $text-color;
}

上面的代码中，我们使用 $bg-color: #fff 和 $text-color: #000 来指定两个参数的默认值。这样在调用 my-mixin 时，如果只传递了一个参数，另一个参数就会使用默认值进行替换，例如：

.my-class {
  @include my-mixin(#fff);
}

上面的代码只传递了一个 $bg-color 参数，这时 $text-color 就会使用默认值 #000 进行替换。生成的 CSS 为：

.my-class {
  background-color: #fff;
  color: #000;
}

总结

本文介绍了 SASS 中 Mixin 的使用，以及如何传递变量给 Mixin。使用 Mixin 可以大大减少样式表中的冗余代码，并提高代码的可维护性和复用性。当我们需要在多个地方使用同一个样式时，可以考虑使用 Mixin。如果样式有一些可变的属性值时，可以把它们抽象成参数并传递，从而实现样式的灵活性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6459a969968c7c53b0bc4a02