Question

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

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

div {
   box-shadow: $shadow;  
}

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

<div>Lorem Ipsum</div>

Answer 1

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

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);
}

Answer 2

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

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

div {
   box-shadow: $shadow;  
}

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

通过SCSS从box-shadow属性中减去blur值

2 个答案: