css - 将 scss mixin 设置回 true

Question

我正在学习 SASS/SCSS 并尝试使用 mixins，试图了解可用的不同可接受变体。

下面是我用来创建 box-shadows 的内容，我使用 if 和 else 语句来显示带有或不带有 inset 属性的以太币。

@mixin box-shadow($inset: false, $horizontal: 0px, $vertical: 1px, $blur: 2px, $color: 000) {
    @if $inset {
        box-shadow: $inset $horizontal $vertical $blur $color;
    }
    @else {
        box-shadow: $horizontal $vertical $blur $color;
    }
}

我想知道如何将 $inset: false 设置为 true 以使其按预期工作。

或者是否有更有效的方法来实现我想要做的事情？

Answer 1

我认为与其包含变量$inset，不如包含关键字inset。这样，您可以传递 true 或 false，它会正确解析:

@mixin box-shadow($inset: false, $horizontal: 0px, $vertical: 1px, $blur: 2px, $color: 000) {
    @if $inset {
        box-shadow: inset $horizontal $vertical $blur $color;
    }
    @else {
        box-shadow: $horizontal $vertical $blur $color;
    }
}

.no-inset {
  @include box-shadow($inset: false);
  }

  .inset {
  @include box-shadow($inset: true);
  }

输出:

.no-inset {
  box-shadow: 0px 1px 2px 0;
}

.inset {
  box-shadow: inset 0px 1px 2px 0;
}