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

【问题标题】：pass a list to a mixin as a single argument with SASS使用 SASS 将列表作为单个参数传递给 mixin
【发布时间】：2011-11-22 23:51:47
【问题描述】：

我喜欢使用 SASS 制作 mixin，以帮助我实现良好的跨浏览器兼容性。我想做一个看起来像这样的mixin：

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

我可以传递这样的东西：

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

结果是这样的：

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;
-moz-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;
-webkit-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;

但是，这不起作用，因为编译器认为我正在尝试传递 mixin 3 参数。 box-shadow 接受可变数量的逗号分隔位，所以我不能只定义像 box-shadow($1,$2,$3) 这样的 mixin。

我试过了

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

它编译了，但实际上并没有渲染样式。

关于如何解决这个问题的任何提示？

【问题讨论】：

和你一样，我认为在有逗号的情况下将参数包装在字符串中很直观。将 #{} 放入 mixin 本身允许您执行此操作。我也添加了一个答案来显示这一点。
只是一个关于rgba 的使用的注释，主要是为了其他开始使用 Sass 的人（因为我知道这里的其他人都已经知道这一点:]）。不必输入rgba(0,0,0,0.5);，您可以输入rgba(black,.5)。 white、red 等和all other CSS colors 也是如此，这样您就不必输入实际的 RGB 值本身。您还可以使用十六进制值：rgba(#258,.5);。或颜色变量：rgba($colorVariable,.5)。希望对您有所帮助。
4 年后，我注意到 box-shadow 表达式的顺序是错误的。好尴尬。

标签： sass

【解决方案1】：

变量参数

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

@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

【讨论】：

Neato。这似乎是 SASS 3.2 的新功能：chriseppstein.github.com/blog/2012/08/23/sass-3-2-is-released 2012 年 8 月 23 日发布，所以如果您使用的是旧版 SASS 编译器，请小心。

【解决方案2】：

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");

感谢瑞恩的提示。

【讨论】：

这是一种非常简洁的方法。
无前缀的声明应该是列表中的最后一个:)
@TomPietrosanti 谢谢！已更新。
谢谢！完美运行
@DarrenCooney 很棒的东西。

【解决方案3】：

使用字符串插值

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

【讨论】：

很好，这真的很方便，而且比 arnaud 的带括号列表的东西更便携。

【解决方案4】：

有很多方法可以做到这一点，最好的方法是使用这样的 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 非常强大:)

【讨论】：

与现有答案相比，这提供了什么？
没有人包含我的最后两个示例。我提供了额外的答案来帮助未来的观众@cimmanon
更好的是，您为什么要评论一年多前发布的内容，问为什么它与其他答案不同？

【解决方案5】：

我想指出，您也可以在调用 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 值。不太相信，在这种情况下会受到重新分配的影响

【讨论】：

【解决方案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((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, ...) )

【讨论】：

文档sass-lang.com/docs/yardoc/…表明第一个应该是有效的，所以我猜你的编译器有一个错误。