Question

请帮我修改mixin并创建兼容的function。

这是我的mixin，它可以接受可选参数!important true 或false，如果!important 是true 则输出height作为 height: 16px !important; 例如：

@mixin svg-size($size, !important: true) {
    svg {
        height: $size foo();
        width: $size foo();
    }
}

Call mixin:
@include svg-size(16px, true);

Output:
svg {
    height: 16px !important;
    width: 16px !important;
}

我还需要一个合适的函数名称

Answer 1

如何将 conditionally-important 作为函数名称并使用一些基本的 at 规则进行流控制，如果为 true 则返回 !important？

@function conditionally-important ($important) {
  @if $important {
    @return !important; 
  }
  @return null;
}

@mixin svg-size($size, $is-important: true) {
  svg {
      height: $size conditionally-important($is-important);
      width: $size conditionally-important($is-important);
  }
}

// Calling as important
@include svg-size(16px, true);
// Output
svg {
    height: 16px !important;
    width: 16px !important;
}

// Calling as not important
@include svg-size(16px, false);
// Output
svg {
    height: 16px;
    width: 16px;
}

Sass 检查值是否传递给 mixin

1 个答案: