数値の演算

css sass scss

cssを書いているとwidthやheight、paddingにmarginなど寸法の計算が多々必要になります。
sassではプロパティに四則演算が書き込みができコンパイル後にその結果を出力できます。

sass
//足し算
.addition{
 width: 100px + 20;
}

//引き算
.subtraction{
 height: 120px - 20;
}

//掛け算
.multiplication{
 padding: 20px * 3;
}

//割り算
.division{
 margin: (120px / 4);
}


cssコンパイル後
.addition {
  width: 120px;
}

.subtraction {
  height: 100px;
}

.multiplication {
  padding: 60px;
}

.division {
  margin: 30px;
}


注意点


  • 足し算では「+」
  • 引き算「-」
  • かけ算「*」
  • 割り算「/」



引き算の「-」演算子の前後に必ず半角スペースを付けます。

ネガティブマージンなどのプロパティ、"-5px"のマイナス値と区別するためにあります。
これは他の計算でも記述を統一するためにも演算子の前後にスペースを空けておく方がいいでしょう。


割り算は式を括弧()で囲う必要があります。

これはfontプロパティで"/(スラッシュ)"を使用するため、混同を防ぐためにあります。



また違う単位同士(px,em,cmなど)での計算もできるのと出来ない単位がありますが
それ自体使用するケースがあまりないので説明は割愛します。

最後に

正直、四則計算を書くよりも暗算したり、パパッと電卓打った方が早いですが
この式は制御構文や条件分岐などプログラムよりのcss処理が必要なときに、その効果が発揮します。