如何在 SASS 中创建不同的投影大小？

Question

我知道这不会以任何实际方式使用，但如何创建不同的投影大小？

 .item-title a {
    display: inline-block;
    color: $some_lovely_button;
    box-shadow: $some_boxshadow_love px;
 }

我真的可以在变量后面加一个space吗？如果我解析例如，它现在能够阅读吗？ 5 到变量，然后它会把 5 px；显然，如果我输入 $some_boxshadow_lovepx 它是一个完全不同的变量。我希望我想要实现的目标是明确的 :D 谢谢！

Answer 1

您可以使用连接或插值方法。

.item-title a {
    display: inline-block;
    color: $some_lovely_button;
    box-shadow: #{$some_boxshadow_love} px;
    box-shadow: {$some_boxshadow_love} + px;
     }

Answer 2

只需使用一个 mixin

=shadow($pixel, $pixel2, $pixel3, $color)
    box-shadow: $pixel, $pixel2, $pixel3, $color

当你使用它时

+shadow(2px, 2px, 0, green)

或者

+shadow(5px, 3px, 5px, red)

这样您就可以在任何地方创建您想要的任何尺寸或类型。顺便说一句，我使用的是 sass，而不是 scss

如何在 SASS 中创建不同的投影大小？

how would one create different drop shadow sizes in SASS?

css

sass

compass-sass