如何使Sass mixin更加强大

Question

描述

我有以下mixin：

@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＆＃34;知道＆＃34;它属于哪里？

Answer 1

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

的 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();

OR

@include insideBorder(20px);

OR

@include insideBorder(blue);

OR

@include insideBorder(.6);

OR

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

<强> LOGIC：

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

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

• 接下来，它将检查值类型是否为“数字”＆amp;将其分配给alpha变量＆amp;如果类型是与em-px-rm等任何其他测量单位的数字，它将被分配给厚度＆amp;如果类型是颜色，则将其指定为颜色变量。

• 最后它将根据变量值创建框阴影css。

Answer 2

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

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

或〜改变厚度＆amp;阿尔法

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

OR~仅更改alpha

@include insideBorder($alpha: .1);

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

您可以阅读更多 HERE