是否可以在 sass 中重载 mixins？答案

【问题标题】：Is it possible to overload mixins in sass?是否可以在 sass 中重载 mixins？
【发布时间】：2011-10-07 13:17:54
【问题描述】：

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

@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);
}

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

【问题讨论】：

仅作为提示，在 sass 中管理供应商前缀很困难，Web 浏览器不断更新，很难维护我们的代码以使其在每次更新时都能正常运行，因此我建议使用 autoprefixer

标签： sass

【解决方案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;
 }

【讨论】：

甜...但这基本上是超载:)。
@Tomas 虽然它适用于你的情况，但这根本不是真正的重载：重载将允许你有两个单独的 mixin 这个border-radius( $radius ); 和 border-radius($top-corners, $bottom-corners)
这也没有考虑到现有 mixin 是您不能或不想修改的供应商库的一部分。
@MatthewG 这就是我在这里的原因

【解决方案2】：

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

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

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

【讨论】：

是的，grunt 可以 - gulp 不要

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

或者您可以使用一种非常简单但有效的方法来伪造重载：

@mixin abc2($a, $b) {
  a: $a;
  b: $b;
}
@mixing abc3($a, $b, $c) {
  @include abc2($a, $b);
  c: $c;
}

您可以简化它，只需在 mixins 名称后添加预期为整数的参数数量即可。

要使此含义适用于未知数量的参数，您可以使用下划线对其进行扩展，表示未知数量（包括 0）个参数。

@mixin abc3_($a, $b, $c, $d...) {
  // expects at least 0 arguments for $d, so at least 3 in total
}
@mixin abc4_($a, $b, $c, $d...) {
  // expects at least 1 argument for $d, so at least 4 in total
}

对于没有重载的mixin，你可以保留整数，这意味着只有一个接口。

如果您已经在使用带有尾随整数的 mixin，您可以将“NAME#”更改为“NAME_#”，以允许“NAME1_#”仍然保留您的旧内涵，并扩展它而不替换它。

好处是您的代码更简洁，更易于阅读。但是，缺点是您必须考虑非正统的语法。然而，根据您的复杂性，这可能会更有效。

您甚至可以在没有整数的情况下结合提供和接口，以及在后台使用整数函数。

@mxin abc($a, $b, $c: null) {
  @if ($c == null) {
    @include abc2($a, $b);
  } @else {
    @include abc3($a, $b, $c);
  }
}

通过这种方式，您可以保持代码非常干净和简单，而无需在单个 mixin 中使用大量 if/else 语句。如果你把你的 sub mixin 放在一个不同的文件中，那么它也很容易保持干净。

是否有意义取决于您要创建的 mixin 的复杂性。越复杂，封装越好。

【讨论】：