我需要一个SCSS混合来做边界。 在此混合中，$position变量应该是可选的:
@mixin border($position, $width, $style, $color) {
@if $position {
border-#{$position}: $width $style $color;
} @else {
border: $width $style $color;
}
}
这是必要的，以便我可以在这两种情况下使用它:
.box {
@include border('bottom', 1px, solid, #999) /*with position*/;
}
和
.button {
@include border(1px, solid, #999); /*without position*/
@include border-radius(9999999px);
padding: .5rem .75rem;
font-size: 14px;
}
对于第二种情况，编译器抛出错误:
Mixin border is missing argument $color.
我做错了什么？
您可以使用$POSITION的默认参数。 我使用false布尔值作为默认变量。
@mixin border($width, $style, $color, $position: false) {
@if $position {
border-#{$position}: $width $style $color;
} @else {
border: $width $style $color;
}
}
您可以使用如下所示:
.button {
@include border(1px, solid, #999);
padding: 0.5rem 0.75rem;
font-size: 14px;
}
如果您没有发送任何参数，它将进入else状态（如上）。 如果发送位置参数，它将进入If状态。 像这样:
.button {
@include border(1px, solid, #999, right);
padding: 0.5rem 0.75rem;
font-size: 14px;
}
另外，请记住，可选参数必须在强制参数之后。 这是一个规则。
