如果未使用变量，有没有办法使用默认属性值？ SCSS

Question

首先，我为应用程序创建了 UI/UX，在其中我提取了常用组件、调色板、字体，并将它们与媒体查询一起制作成库。我意识到有些组件本质上是相同的，只是在一些属性上有所不同，例如高度或宽度。所以我制作了可以在旅途中定制的组件样式和组件，所以当涉及到实际的界面实现时，我基本上可以玩 LEGO。

问题在标题中。我可以以某种方式为变量设置默认值吗？因此，当未传入时，我不会收到错误消息，而是显示为默认值？如果是，最简单的方法和最佳做法是什么？

组件 SCSS：

@mixin component($width, $height, $color) {
  .component{
     height: $height;
     width: $width;

     .somethingNested {
        color: $color;
     }
     ...
  }
   @content (if something needs to be overwritten)
}

Answer 1

是的，这是可能的。您在参数后添加: value。

@mixin component($width: 80px, $height: 80px, $color: white) {
   ...
}

提示：mixin 支持位置参数和命名参数。

// you wanna keep the default $width and $height but change $color
// with positional argument you have to repeat yourself
.foo {
  @include component(80px, 80px, pink);
}

// with named argument, just provide the $color
. foo {
  @include component($color: pink);
}

参考：https://sass-lang.com/documentation/at-rules/mixin#optional-arguments