SASSでどのように異なるドロップシャドウサイズを作成するのですか？

Question

私はこれが実用的な方法で使われることはないと知っていますが、どのようにしてドロップシャドウサイズが違うのでしょうか？

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

変数の後に実際にスペースを入れることはできますか？もし私が解析すれば、今読むことができるでしょうか？変数に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) 

を使用しています。私は、scssではない、サスを使用しています