使用SASS将列表作为单个参数传递给mixin

卡卡西Green 2020.03.19

我想指出的是，您也可以在调用mixin时使用参数名称传递值：

@mixin shadow($shadow: 0 0 2px #000) {
    box-shadow: $shadow;
    -webkit-box-shadow: $shadow; 
    -moz-box-shadow: $shadow; 
}

.my-shadow {
  @include shadow($shadow: 0 0 5px #900, 0 2px 2px #000);
}

请注意，scss是作用域的，因此$shadow如果以后再次使用，仍将保留其mixin值。少一点我认为，在这种情况下会遭受重新分配

ALEYHarry 2020.03.19

这不会编译：

+box-shadow(inset 0 1px 0 #FFD265, 0 0 0 1px #912E01, 0 0 0 7px rgba(0, 0, 0, .1), 0 1px 4px rgba(0, 0, 0, .6))

编译：

+box-shadow((inset 0 1px 0 #FFD265, 0 0 0 1px #912E01, 0 0 0 7px rgba(0, 0, 0, .1), 0 1px 4px rgba(0, 0, 0, .6)))

也就是说，在以逗号分隔的阴影列表周围添加括号，它应该可以工作：

+box-shadow( (myshadow1, myshadow2, ...) )

逆天L 2020.03.19

使用字符串插值

@include box-shadow(#{"inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px #ff800f"});

TonyEvaL 2020.03.19

可变参数

有时，mixin接受未知数量的参数是有意义的。例如，用于创建框阴影的混合可以将任意数量的阴影作为参数。在这些情况下，Sass支持“变量参数”，即在混合声明末尾的参数，该参数接受所有剩余的参数并将它们打包为列表。这些参数看起来像普通参数，但后面跟有...。例如：

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

通过：http : //sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#variable_arguments

Itachi理查德 2020.03.19

有很多方法可以做到这一点，最好的方法是使用像这样的mixin：

@mixin box-shadow($value...) {
  -webkit-box-shadow: $value;               
  -moz-box-shadow: $value;                  
  box-shadow: $value;
}

并像这样包含它：

@include box-shadow(inset 0 1px 0 #FFD265, 0 0 0 1px #912E01, 0 0 0 7px rgba(0, 0, 0, .1), 0 1px 4px rgba(0, 0, 0, .6));

要么

@mixin box-shadow($value) {
      -webkit-box-shadow: #{$value};               
      -moz-box-shadow: #{$value};          
      box-shadow: #{$value};
}

并像这样包含它：

@include box-shadow("inset 0 1px 0 #FFD265, 0 0 0 1px #912E01, 0 0 0 7px rgba(0, 0, 0, .1), 0 1px 4px rgba(0, 0, 0, .6)");

要么：

@mixin box-shadow($value) {
      $value: unquote($value);
      -webkit-box-shadow: $value;               
      -moz-box-shadow: $value;          
      box-shadow: $value;
}

要么：

@mixin box-shadow($value) {
  -webkit-box-shadow: $value;               
  -moz-box-shadow: $value;                  
  box-shadow: $value;
}

并像这样包含它：

@include box-shadow((inset 0 1px 0 #FFD265, 0 0 0 1px #912E01, 0 0 0 7px rgba(0, 0, 0, .1), 0 1px 4px rgba(0, 0, 0, .6)));

Sass非常强大:)

猴子卡卡西 2020.03.19

SASS 3.1以下

注意：如果您使用的是SASS 3.2+，则按照rzar的建议使用“可变参数”功能。

只需在mixin本身中使用字符串插值，如下所示：

@mixin box-shadow($value) {
  -webkit-box-shadow: #{$value};               // #{} removes the quotation marks that
  -moz-box-shadow: #{$value};                  // cause the CSS to render incorrectly.
  box-shadow: #{$value};
}

// ... calling it with quotations works great ...
@include box-shadow("inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px #ff800f");

感谢小费瑞安。