Sass 检查值是否传递给 mixin

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 规则进行流量控制返回 !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

Sass check if value is passed to mixin

variables

scope

sass