通过 SCSS 从 box-shadow 属性中减去模糊值答案

【问题标题】：Subtracting blur value from box-shadow property through SCSS通过 SCSS 从 box-shadow 属性中减去模糊值
【发布时间】：2014-09-14 00:15:09
【问题描述】：

我一直在思考这个问题。在我的 SCSS 中，我有以下内容：

$shadow: 0 0 25px rgb(46, 46, 46);

div {
   box-shadow: $shadow;  
}

我怎样才能减去 25 像素的模糊，比如说 10，以便我可以使用 15 像素的模糊？此外，如何选择模糊值？考虑到我想在 div 元素上应用 box-shadow：

<div>Lorem Ipsum</div>

【问题讨论】：

您的问题对我来说似乎不清楚。你已经得到了你想要的一切，为什么不写0 0 15px rgb( 46, 46, 46 ); 作为变量的值呢？如果您想从 $shadow 变量中动态减去 10，也可以嵌套变量。
嵌套变量是这里的方法。初始化后不能减去 10
但我想从蓝色值中减去 10。我怎么能指定使用嵌套变量？

标签： css sass

【解决方案1】：

为模糊值创建一个新变量：

$blur: 25px - 10;
$shadow: 0 0 $blur rgb(46, 46, 46);

div {
   box-shadow: $shadow;  
}

根据您的整体需求，编写 mixin 可能会更好。

【讨论】：

【解决方案2】：

$shadow 变量只是一个值列表。如果模糊始终是列表中的第三项（例如在您的示例中），那么您正在查看的是这样的：

div {
   box-shadow: nth($shadow, 1) nth($shadow, 2) nth($shadow, 3) - 15px nth($shadow, 4);
}

如果模糊位于列表中的另一个有效位置（可能是嵌入阴影），那么您需要开始检查列表的长度和/或检查第一个元素看是不是inset:

div {
    @if nth($shadow, 1) == inset {
        box-shadow: nth($shadow, 1) nth($shadow, 2) nth($shadow, 3) nth($shadow, 4) - 15px nth($shadow, 5);
    } @else {
        box-shadow: nth($shadow, 1) nth($shadow, 2) nth($shadow, 3) - 15px nth($shadow, 4);
    }
}

或者，您可以通过编程方式进行：

$shadow: 0 0 25px rgb(46, 46, 46);

@function adjust-shadow($shadow, $position, $adjustment) {
    $x: ();
    $shift: if(nth($shadow, 1) == inset, -1, 0);

    @for $i from 1 through length($shadow) {
        $p: $i + $shift;
        @if $position == color and $i == length($shadow) {
            $x: append($x, $adjustment);
        } @else if ($position == x-offset and $p == 1) or ($position == y-offset and $p == 2) or ($position == blur and $p == 3) {
            $x: append($x, nth($shadow, $i) + $adjustment);
        } @else {
            $x: append($x, nth($shadow, $i));
        }
    }
    @return $x;
}

.foo {
    box-shadow: adjust-shadow($shadow, blur, -15px);
}

.bar {
    box-shadow: adjust-shadow($shadow, color, blue);
}

.baz {
    box-shadow: adjust-shadow(adjust-shadow($shadow, blur, -15px), y-offset, -2), adjust-shadow($shadow, blur, 10px);
}

【讨论】：