Question

假设你有像这样的阴影混合：

@mixin box-shadow($offset, $blur, $color)
{
   -moz-box-shadow: $offset $offset $blur $color;
   -webkit-box-shadow: $offset $offset $blur $color;
   box-shadow: $offset $offset $blur $color;
}

是否可以使用以下内容重载mixin：

@mixin box-shadow($offset, $blur)
{
    @include box-shadow($offset, $blur, #999);
}

或者我必须为mixin使用不同的名称吗？

Answer 1

你不能超载，但典型的做法是设置默认值。

 /* this would take color as an arg, or fall back to #999 on a 2 arg call */
 @mixin box-shadow($offset, $blur, $color: #999) {
   -webkit-box-shadow: $offset $offset $blur $color;
   -moz-box-shadow: $offset $offset $blur $color;
   box-shadow: $offset $offset $blur $color;
 }

Answer 2

如果您需要略微调整供应商mixin，可以将其复制到另一个文件中 - 包含在原始文件之后 - 并在其中进行编辑，并且将忽略供应商的原件。

@import "_their-mixins";
@import "_our-mixins";

警告 - 这可能取决于您使用的处理器。在撰写本文时，使用grunt和grunt-contrib-compass

可以很好地发挥作用

Answer 3

@ numbers1311407解决方案是正确的，但您可以使用@each指令创建更短的mixin：

@mixin box-shadow($offset, $blur, $color: #999) {
  @each $prefix in -moz-, -webkit-, null {
    #{$prefix}box-shadow: $offset $offset $blur $color;
  }
}

是否有可能在sass中重载mixins？

3 个答案: