回答:
sassガイドラインによるより健全な解決策interpolate
は、次の例のような変数に対するものです。
margin: 0 -#{$pad} 20px -#{$pad};
例:https : //www.sassmeister.com/gist/c9c0208ada0eb1fdd63ae47830917293
私は前の2つの答えを検討した後で私の2ペンスを追加していますが、これを読んでいます(強調は私のものです):
特にのような補間の使用
#{$number}px
は避けてください。これは実際には数を作成しません!数値のように引用符で囲まれていない文字列を作成しますが、数値の操作や関数では機能しません。計算ユニットをクリーンにして、$number
すでにユニットが存在するようにするpx
か、または書き込み$number * 1px
ます。
したがって、SASS / SCSSの数学的能力を維持する正しい方法は次のようになると思います。
$pad: 15px;
padding: 0 $pad $pad;
margin: 0 $pad*-1 20px $pad*-1;