完全阻止 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 { ... }