Sass 检查是否将值传递给 mixin

Question

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

这是我的mixin，它可以接受可选参数!importanttrue或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;
}