プロパティに変数でマイナス値を設定するケースです。例えばマイナスmarginを設定する場合、値が単独の場合は以下のように記述すれば問題ありません。
$side-padding: 30px;
.contents {
margin-left: -$side-padding;
}
//コンパイル後
.contents {
margin-left: -30px;
}
ですがプロパティに他の値も設定されている場合、以下のように記述すると意図した結果でコンパイルできません。
$side-padding: 30px;
.contents {
margin: 0 -$side-padding;
}
//コンパイル後
.contents {
margin: -30px;
}
これは変数を使用したことで以下のようなマイナスの演算になってしまったのが原因です。
0 - 30px = -30px
これを回避するには変数を使用したマイナス値をかっこで囲います。
$side-padding: 30px;
.contents {
margin: 0 (-$side-padding);
}
//コンパイル後
.contents {
margin: 0 -30px;
}
またはインターポレーションを使用すれば正常にコンパイルできます。
$side-padding: 30px;
.contents {
margin: 0 -#{$side-padding};
}
//コンパイル後
.contents {
margin: 0 -30px;
}





