通过SCSS从长方体阴影特性中减去模糊值

我考虑这个问题已经有一段时间了。在我的SCSS中，我有以下内容：

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

div {
   box-shadow: $shadow;  
}

我如何将25像素的模糊减去10，这样我就可以使用15像素的模糊了？此外，如何选择模糊值？考虑到我希望在div元素上应用长方体阴影：

<div>Lorem Ipsum</div>

Lorem Ipsum

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

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

div {
   box-shadow: $shadow;  
}

---

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

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

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

div {
   box-shadow: $shadow;  
}

---

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

变量

$shadow

只是一个值列表。如果模糊始终是列表中的第三项（例如在您的示例中），那么您看到的是如下内容：

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

如果模糊在列表中的另一个有效位置（可能是插入阴影），则需要开始执行一些操作，例如检查列表的长度和/或检查第一个元素是否为

插入
：

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

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

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

如果模糊在列表中的另一个有效位置（可能是插入阴影），则需要开始执行一些操作，例如检查列表的长度和/或检查第一个元素是否为
插入
：

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

我觉得你的问题不清楚。你已经得到了你想要的一切，为什么不写
015pxrgb（46,46,46）作为变量的值？如果您想从
$shadow
变量中动态减去10，也可以嵌套变量。嵌套变量就是一种方法。初始化后不能减去10，但我想从蓝色值减去10。我如何使用嵌套变量指定呢？我似乎不清楚您的问题。你已经得到了你想要的一切，为什么不写
015pxrgb（46,46,46）作为变量的值？如果您想从
$shadow
变量中动态减去10，也可以嵌套变量。嵌套变量就是一种方法。初始化后不能减去10，但我想从蓝色值减去10。我如何使用嵌套变量指定它？