有可能在sass中过载mixins吗？

ass CSS

阳光小哥Tom

2020-03-23

假设您有一个混合阴影，例如：

@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使用不同的名称？

第2932篇《有可能在sass中过载mixins吗？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答
Itachi理查德 2020.03.23

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

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

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

 /* 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;
 }
小宇宙 2020.03.23

如果您需要稍微调整供应商混音，则可以将其复制到另一个文件（包括在原始文件之后），然后在其中进行编辑，而供应商的原始文件将被忽略。

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

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android