如何在 SASS 中使用 VOID 变量答案

【问题标题】：How to use VOID variable in SASS如何在 SASS 中使用 VOID 变量
【发布时间】：2012-05-09 02:45:30
【问题描述】：

你好世界:)

我正在尝试使用 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 );

或者我该怎么做？

【问题讨论】：

好吧，这将是这样的：@mixin simpleBoxShadow ($string ) { -webkit-box-shadow: $string; box-shadow: $string; ... }

标签： css sass

【解决方案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 之上的框架，提供许多便利功能和 mixin，包括一些用于 box-shadow 的框架。

【讨论】：