Question

Hello World：）

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

@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值。有时它应该是INSET，有时候只是无效。当我使用这个MIXIN时，我应该写什么？

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

或者我怎么能以另一种方式做到这一点？

Answer 1

在SASS中，这些以空格分隔的值被视为lists。您可以使用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之上构建的框架，它提供了许多便利功能和混合，包括一些{{{ 3}}

如何在SASS中使用VOID变量

1 个答案: