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;
}

将scss mixin设置为true

1 个答案: