完全防止 Sass 包含属性

Question

在我当前的项目中，我使用 sass-mixin 大致如下：

mixin.scss:

@mixin my_mixin($header-border-top-stack, 
                $header-border-bottom-stack) {
  #some-id {
     border-top: $header-border-top-stack;
     border-bottom: $header-border-top-stack;
  }
}

styles.scss:

@import "path/to/mixin.scss";
@include my_mixin(1px solid black, 2px solid red);

有时我根本不想碰 border-bottom 属性。可悲的是：

@import "path/to/mixin.scss";
@include my_mixin(1px solid black, none);

结果 .css 是这样的：

#some-id {
  border-top: 1px solid black;
  border-bottom: none;
}

我正在寻找一种方法来防止混合完全接触 border-bottom 属性（甚至不要将其包含在 .css 中）。有什么想法吗？

Answer 1

我添加了一个 @if condition 用于检查

@mixin my_mixin($header-border-top-stack, $header-border-bottom-stack) {
  #some-id {
    border-top: $header-border-top-stack;
    @if $header-border-bottom-stack != 'none' {
      border-bottom: $header-border-bottom-stack;
    }
  }
}

这很好用。然而，只是一个提示，我注意到您 mixin 将选择器放在其中，这不灵活，我不知道这是否是好的做法。你可以这样重写它

@mixin my_mixin($header-border-top-stack, $header-border-bottom-stack) {
  border-top: $header-border-top-stack;
  @if $header-border-bottom-stack != 'none' {
    border-bottom: $header-border-bottom-stack;
  }
}

通过这样做，您 mixin 可以用于不同的 tags
div { @include my_mixin(1px solid black, none); }
p { @include my_mixin(1px solid black, 2px solid red); }

而不是它总是返回 #some-id { ... }

完全防止 Sass 包含属性

Prevent Sass from including property at all

html

css

sass

mixins

完全防止 Sass 包含 属性

Prevent Sass from including property at all

html

css

sass

mixins

完全防止 Sass 包含属性