2021.01.27

Sass

プロパティに変数でマイナス値を設定

プロパティに変数でマイナス値を設定するケースです。例えばマイナス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;
}

関連記事

2022.07.13

Sass

@extendのプレースホルダーセレクタを利用

@extend専用のプレースホルダーセレクタは「%セレクタ名」のように記述します。@extendのプレースホルダーセレクタはCSSとして生成されません。 以下の…

2024.06.27

Sass

@contentを利用してmixinにスタイルセットを渡す

mixinの中で@contentを記述すると、呼び出し側から渡されたCSSの記述(スタイルセット)を@contentが書かれた場所で展開します。 以下はhove…

2025.07.05

Sass

mixinで@ifの条件分岐を利用して疑似要素を表示

mixinで@if(条件分岐)を利用して、疑似要素にグラデーションの点線ボーダーを表示します。mixinの設定は以下になります。 デフォルトの設定として要素の上…

2020.09.30

Sass

Koalaで発生したコンパイルエラーの対処法

Koalaで発生したコンパイルエラーの対処法です。発生したエラーはログから確認できますが、Koalaの起動を終了するとエラーログは消去されます。 Argumen…

2024.08.02

Sass

ローカル変数をスタイルセットの外側で使用

通常Sassのローカル変数はスタイルセットの外側で使用することができません。セレクタ名の一部で変数を使用する場合、以下のように記述すると定義されていない変数を参…

上に戻る