今回はSASSで四則演算（余剰も含む）する際に単位の扱い方についてまとめてみました！
SASS(CSS)では「px」や「vw」、「em」など、たくさんの単位が存在します。
SASSで四則演算を行うときは、この単位に注意しないとエラーが起きたり、意図しない単位で出力されたりなどしてしまうので、しっかりと把握しておきましょう！

加算（ + ）についてのまとめ

まずは、基本となる加算になります。

加算をすることで、要素Cの幅を要素Aの幅と要素Bの幅を足した値と同じ幅にするといったことができるようになります。

要素Aの幅と要素Bの幅を変数化しておけば、要素Cの幅の根拠が分かりやすく、可読性が上がったりするのでおススメです！

演算が出来る例

SASSの記述

/* 単位無し同士の計算 */
.hogeA
  margin: 1 + 1

/* 同じ単位の計算 */
.hogeB
  margin: 1px + 1px

/* 片方が単位無し */
.hogeC
  margin: 1 + 1

/* 単位は異なるけど計算される組み合わせ */
.hogeD
  margin: 1px + 1pt
.hogeE
  margin: 1px + 1cm

出力

/* 単位無し同士の計算 */
.hogeA {
  margin: 2;
}

/* 同じ単位の計算 */
.hogeB {
  margin: 2px;
}

/* 片方が単位無し */
.hogeC {
  margin: 2;
}

/* 単位は異なるけど計算される組み合わせ */
.hogeD {
  margin: 2.33333px;
}

.hogeE {
  margin: 38.79528px;
}

エラーが出る例

以下の場合は、単位が噛み合わないのでエラーが発生してしまいます。

/* 単位が異なるのでエラーになる組み合わせ */
.hogeF
  margin: 1px + 1%
.hogeG
  margin: 1px + 1em

減算（ - ）についてのまとめ

減算については、加算と同じ扱いになります。

演算が出来る例

SASSの記述

/* 単位無し同士の計算 */
.hogeA
  margin: 1 - 1

/* 同じ単位の計算 */
.hogeB
  margin: 1px - 1px

/* 片方が単位無し */
.hogeC
  margin: 1 - 1

/* 単位は異なるけど計算される組み合わせ */
.hogeD
  margin: 1px - 1pt
.hogeE
  margin: 1px - 1cm

出力

/* 単位無し同士の計算 */
.hogeA {
  margin: 0;
}

/* 同じ単位の計算 */
.hogeB {
  margin: 0px;
}

/* 片方が単位無し */
.hogeC {
  margin: 0;
}

/* 単位は異なるけど計算される組み合わせ */
.hogeD {
  margin: -0.33333px;
}

.hogeE {
  margin: -36.79528px;
}

エラーが出る例

以下の場合は、単位が噛み合わないのでエラーが発生してしまいます。

/* 単位が異なるのでエラーになる組み合わせ */
.hogeF
  margin: 1px - 1%
.hogeG
  margin: 1px - 1em

※加算の時と同じですね～

乗算（ * ）についてのまとめ

乗算については、同じ単位同士で演算を行うとエラーを出します。

まぁ、冷静に考えて単位同士の乗算って意味わからないですよね笑

あとは、加算、減算と同じように別単位同士の計算もできません。

演算が出来る例

SASSの記述

/* 単位無し同士の計算 */
.hogeA
  margin: 1 * 3

/* 片方が単位無し */
.hogeB
  margin: 1px * 3

出力

/* 単位無し同士の計算 */
.hogeA {
  margin: 3;
}

/* 片方が単位無し */
.hogeB {
  margin: 3px;
}

エラーが出る例

以下の場合は、単位が噛み合わないのでエラーが発生してしまいます。

掛け算の場合は単位が同じでもエラーが出てしまいますね～

/* 単位同士の計算 */
.hogeA
  margin: 1px * 3px
.hogeB
  margin: 1px * 3%

除算（ / ）についてのまとめ

除算に関しては、計算する際に()をつける必要があります。

変数を使用して除算をする際は、このカッコは無くても問題ありません！

また、除算では同じ単位同士で計算すると単位が除かれる性質を持っています

イメージ的には、

px / px = 1

みたいな感じで、単位も除算される感じなんですかね？？？

演算が出来る例

SASSの記述

/* 単位なしの計算 */
.hogeA
  margin: ( 1 / 3 )

/* 単位が同じ */
.hogeB    
  margin: ( 1px / 3px )

/* 片方が単位なし */
.hogeC
  margin: ( 1px / 3 )

/* 単位は異なるけど計算される組み合わせ */
.hogeD
  margin: ( 1px / 1pt )
.hogeE
  margin: ( 1px / 1cm )

出力

/* 単位なしの計算 */
.hogeA {
  margin: 0.33333333
}

/* 単位が同じ */
.hogeB {
  margin: 0.33333333
}

/* 片方が単位なし */
.hogeC {
  margin: 0.33333333px
}

/* 単位は異なるけど計算される組み合わせ */
.hogeD {
  margin: 0.75
}
.hogeE {
  margin: 0.02645833
}

エラーが出る例

以下の場合は、単位が噛み合わないのでエラーが発生してしまいます。

/* 単位は異なるけど計算される組み合わせ */
.hogeF
  margin: ( 1px / 3% )

.hogeG
  margin: ( 1px / 3em )

余剰（ % ）についてのまとめ

使いどころは謎ですが、余剰計算についてもやっていきます！

余剰はプログラミング言語でお馴染みの、割り算の余りを算出する演算子ですね！！

例えば、

10 / 3= 3 (あまり1)

になります。

余剰計算では、このあまり1の部分を算出してくれます。

演算が出来る例

SASSの記述

/* 単位なしの計算 */
.hogeA
  margin: ( 10 % 3 )

/* 単位が同じ */
.hogeB    
  margin: ( 10px % 3px )

/* 片方が単位なし */
.hogeC
  margin: ( 10px % 3 )

/* 単位は異なるけど計算される組み合わせ */
.hogeD
  margin: ( 10px % 3pt )
.hogeE
  margin: ( 10px % 3cm )

出力

/* 単位なしの計算 */
.hogeA
  margin: 1

/* 単位が同じ */
.hogeB    
  margin: 1px

/* 片方が単位なし */
.hogeC
  margin: 1px

/* 単位は異なるけど計算される組み合わせ */
.hogeD
  margin: 2px
.hogeE
  margin: 10px

エラーが出る例

以下の場合は、単位が噛み合わないのでエラーが発生してしまいます。

/* 単位は異なるけど計算される組み合わせ */
.hogeF
  margin: ( 1px / 3% )

.hogeG
  margin: ( 1px / 3em )

なんか、もはやいつも通りって感じですねww

単位を取り除く方法（おまけ）

最後におまけとして「単位を取り除く関数」を作ってみましたー！！

なかなかトリッキーですねw

簡単に説明すると、除算では同じ単位同士の演算は単位も消える性質を利用しています。

( $num * 0 + 1 )

この計算では、引数で渡された値の単位と同じ単位を持つ「1」を生成しています。

つまり、「10px」が引数で渡された場合、上記の計算式では「1px」を返します。

「20em」だった場合は、「1em」を返してくれるようになります。

あとは、渡された値と、その値と同じ単位を持つ「1」で割り算をすれば、単位だけが取り除かれた値だけが返ってきます。

ちょっと分かりづらいかもしれないので、具体例を出してみますね！

引数が「10px」の場合を考えてみます。

10pxを式に当てはめてみます。

10px / ( 10px * 0 + 1 )

()内では、以下のような手順で「1px」が計算されます。

( 10px * 0 + 1 )

( 0px + 1 )

( 1px )

あとは、単なる割り算をすれば、完了です！！

10px / 1px

四則演算の性質をフルに使った変数ですね〜

もし分からなくても、たいしてコーディングに影響はないと思うので安心してください笑

単位を取り除くようなタイミングは、なかなか無いとは思いますが、その時が来たらぜひ活用してください〜

最後までありがとうございました！！！