css - Sassの負の変数値？

Question

次のように、同じ量の正と負を使用するscssセレクターがいくつかあります。

padding: 0 15px 15px;
margin: 0 -15px 20px -15px;

15pxのすべての量に変数を使用したいのですが、これは機能しません。

$pad: 15px;
padding: 0 $pad $pad;
margin: 0 -$pad 20px -$pad;

証拠金は正の数に変換されます。私は何かが足りないのですか？

Answer 1

このようにしてみてください

margin: 0 (-$pad) 20px (-$pad);

Answer 2

sassガイドラインに従ったより適切な解決策interpolateは、次の例のような変数に対するものです。

margin: 0 -#{$pad} 20px -#{$pad};

例：https ：//www.sassmeister.com/gist/c9c0208ada0eb1fdd63ae47830917293

Answer 3

前の2つの答えを考慮した後、2ペンスを追加していますが、これを読んでいます（私の強調）：

特に、のような補間の使用は避けて#{$number}pxください。これは実際には数字を作成しません！数値のように見える引用符で囲まれていない文字列を作成しますが、数値の演算や関数では機能しません。$number数学の単位を作成してみてください-すでに単位が含まれるようにクリーンにするpxか、を記述して$number * 1pxください。

ソース

したがって、正しい方法は次のようになると思います。これにより、SASS/SCSSの数学的能力が維持されます。

$pad: 15px;
padding: 0 $pad $pad;
margin: 0 $pad*-1 20px $pad*-1;

Answer 4

関数を作成する

@function neg($val) {
  @return $val * -1
};

それから私はそれをこのように使います

$gutter: 30px;

.header {
  margin: $gutter neg($gutter);
}