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包括财产

1 个答案: