在Sass中,你可以为混合器参数设置默认值,以便在调用混合器时,如果没有提供相应的参数,将使用默认值。这可以通过在参数列表中使用$variable: default-value的语法来实现。以下是一个带有默认参数值的混合器示例:
// 定义带有默认参数值的混合器
@mixin custom-button($bg-color: #3498db, $text-color: #ffffff) {
  padding: 10px 20px;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  background-color: $bg-color;
  color: $text-color;

  &:hover {
    background-color: darken($bg-color, 10%);
  }
}

// 使用混合器,不提供参数时将使用默认值
.my-button {
  @include custom-button;
}

.another-button {
  @include custom-button($bg-color: #e74c3c);
}

在上面的例子中,custom-button混合器的参数列表中包含了默认值。如果在使用混合器时没有为参数传递值,将使用默认值。在第一个例子中,.my-button使用了混合器而没有提供任何参数,因此将使用默认的背景颜色和文字颜色。在第二个例子中,.another-button提供了一个新的背景颜色,但未提供文字颜色,因此文字颜色将使用默认值。

这种方式使得混合器在不同的使用情境下更加灵活,同时保留了默认的设计选择。


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