在Sass中，混合器（Mixins）是一种可重用的代码块，可以包含一组CSS规则。使用混合器可以简化代码并提高可维护性。以下是一个简单的混合器示例：
// 定义一个混合器
@mixin border-radius($radius) {
  border-radius: $radius;
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
}

// 使用混合器
.button {
  @include border-radius(5px);
  background-color: #3498db;
  color: #ffffff;
  padding: 10px 20px;
}

在上面的例子中，@mixin用于定义混合器，它接受一个参数 $radius，并在其中包含了设置border-radius属性的CSS规则。

然后，通过@include关键字，你可以在其他选择器中引用混合器并传递参数。在.button选择器中，通过@include border-radius(5px);，我们调用了混合器并将5px作为参数传递给它。编译后的CSS将包含.button的样式以及border-radius属性。

编译后的CSS可能如下所示：
.button {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  background-color: #3498db;
  color: #ffffff;
  padding: 10px 20px;
}

这样，混合器允许你在不同的地方使用相同的样式块，提高了代码的可维护性和重用性。


转载请注明出处：http://www.zyzy.cn/article/detail/6178/SASS