如果未使用变量，是否可以使用默认属性值？ SCSS

Question

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

问题在标题里。我可以以某种方式为变量设置默认值吗？所以当它没有传入时，我不会收到错误，而是显示为默认值？如果是，最简单的方法和最佳实践是什么？

组件 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

如果未使用变量，是否可以使用默认属性值？ SCSS

Is there a way to use default property value if the variable not used? SCSS

css

scss-mixins

如果未使用变量，是否可以使用默认 属性 值？ SCSS

Is there a way to use default property value if the variable not used? SCSS

css

scss-mixins

如果未使用变量，是否可以使用默认属性值？ SCSS