如何让 Sass mixin 更健壮

Question

说明

我有以下混合：

@mixin insideBorder ($thickness:2px, $color:black, $alpha:.05) {
    box-shadow:inset 0 0 0 $thickness rgba($color, $alpha);
}

A. 一种使用方式如下：

@include insideBorder();

将输出：

box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.05);

B.我也可以这样使用：

@include insideBorder(5px, red);

将输出：

box-shadow: inset 0 0 0 2px rgba(255, 0, 0, 0.05);

问题

但是，如果我只想更改颜色，我会采用以下两种方式之一：

1. @include insideBorder(#369);
2. @include insideBorder(red);

然后我会编译为：

1. box-shadow: inset 0 0 0 #336699 rgba(0, 0, 0, 0.05);
2. box-shadow: inset 0 0 0 red rgba(0, 0, 0, 0.05);

或者如果我这样做：

• @include insideBorder(red, .5);

它会报错：

Syntax error: $color: 0.5 is not a color for 'rgba'...

问题

我如何改进这个 mixin，使它可以接受任意数量的参数，但取决于参数的类型，mixin“知道”它属于哪里？

Answer 1

使用我由@Eric M Suzanne 制作和改进的这个 sass 脚本

DEMO

$insideBorderThickness: 2px !default;
$insideBorderColor: black !default;
$insideBorderAlpha: .05 !default;

@mixin insideBorder($values...) {
    $borderThickness: $insideBorderThickness;
    $borderColor: $insideBorderColor;
    $borderAlpha: $insideBorderAlpha;

    @each $value in $values {
        @if type_of($value) == number {
            @if unit($value) == "" {
                $borderAlpha: $value;
            } @else {
                $borderThickness: $value;
            }
        } @else if type_of($value) == color {
            $borderColor: $value;
        }
    }

    box-shadow: inset 0 0 0 $borderThickness rgba($borderColor, $borderAlpha);
}

然后你可以像这样使用@include：

@include insideBorder();

或

@include insideBorder(20px);

或

@include insideBorder(blue);

或

@include insideBorder(.6);

或

@include insideBorder(3em, orange, .5);

逻辑：

• 为 box-shadow 定义了第一个默认值。

• 当使用 insideBorder() mixin 时，它会将默认值分配给内部变量（以避免在每次调用 mixin 时更改默认值）。

• 接下来，它将检查值类型是否为“数字”并将其分配给 alpha 变量，如果类型为带有任何其他测量单位（如 em-px-rm）的数字，则将其分配给厚度，如果类型为颜色，将赋值给颜色变量。

• 最后它会根据变量值创建盒子阴影css。

Answer 2

你的 Mixin 很好。使用此技术包括：

@include insideBorder($thickness: 3px, $color: black, $alpha: .1);

或者~改变厚度和alpha

@include insideBorder($thickness: 3px, $alpha: .1);

或者~只改变alpha

@include insideBorder($alpha: .1);

通过这种方式，您可以通过告诉哪个值将转到哪个变量来具体化。

您可以阅读更多HERE