css - 如何在 SASS 中使用 VOID 变量

Question

你好世界 ：）

我正在尝试使用 SASS 为 BOX-SHADOW 属性编写 MIXINS，如下面的代码。

@mixin simpleBoxShadow ($inset, $xoffset, $yoffset, $blur, $spread, $color ) {
    -webkit-box-shadow: $inset $xoffset $yoffset $blur $spread $color;
            box-shadow: $inset $xoffset $yoffset $blur $spread $color;
    ...
}

而且我坚持使用 INSET 值。有时它应该是插图，有时只是无效。我在使用这个 MIXIN 的时候应该写什么？

@include simpleBoxShadow ( -what's there?- , 10px, 10px, 10px, 10px, #000000 );

或者我该怎么做？

Answer 1

这些以空格分隔的值在 SASS中被视为列表。您可以使用join()函数将列表连接在一起。所以一种方法是做这样的事情：

@mixin simpleBoxShadow ( $xoffset, $yoffset, $blur, $spread, $color, $inset: false ) {
    $shadow: $xoffset $yoffset $blur $spread $color;

    @if ($inset) {
        $shadow: join(inset, $shadow, space);
    }

    -webkit-box-shadow: $shadow;
            box-shadow: $shadow;
}

然后你可以像这样使用你的mixin：

// with inset
@include simpleBoxShadow( $inset: true, 10px, 10px, 10px, 10px, #000000 );
// without inset
@include simpleBoxShadow( 10px, 10px, 10px, 10px, #000000 );

更新：您可能还想考虑使用Compass - 它是一个建立在 SASS 之上的框架，提供许多便利功能和 mixin，包括一些用于box-shadow的功能。