SCSSを使ってwidthやheightなどの値を割り算や掛け算で算出しようとするときに、コンパイルできなかったり、計算結果が望んだものと違う結果になることがあります。
ここでは、SCSSでどういった場合に割り算と掛け算の計算処理ができないのか、どのように修正すればいいのかについてまとめています。
他にも、足し算と引き算の場合、あまり算出としての「％」は使えるのか？といったことをまとめています。
SCSSの割り算の注意点（ポイント）
SCSSで割り算の処理をする場合は以下のポイントを抑える必要があります。
- 割り算はカッコで囲む。
- 単位は前方の数値につける。
- 単位をカッコの外につけてはいけない（コンパイル後にスペースが入る）
- 単位のあるもの同士の徐算はコンパイルエラーになる。
- カッコ内にスペースはあってもなくてもどちらでも問題ない。
SCSSの割り算が上手くいく事例
以下の場合はコンパイル後に正しく計算が行われます。
width: (60px/2);
width: (60px / 2);CSSにコンパイルすると以下のようになります。
width: 30px;
width: 30px;狙ったとおりの結果になっていることがわかります。
SCSSの割り算がおかしくなる例
以下のような記述をするとコンパイル結果がおかしくなります。
width: 60px / 2;
width: 60px/2;
width: 60 / 2 px;
width: (60 / 2)px;
width: (60/2)px;CSSにコンパイルすると以下のようになります。
width: 60px/2;
width: 60px/2;
width: 60/2 px;
width: 30 px;
width: 30 px;最後の２つは正しく「30px」になっているように見えますが、数値と単位の間にスペースが入っているため、CSSが正しく認識できません。
SCSSの割り算でコンパイルエラーになる例
計算式の中で単位を複数指定するとコンパイルエラーになります。
width: 60px / 2px;
width: 60px/2px;CSSにコンパイルすると以下のようになります。
1 ERROR in child compilations
SassError: 120px*px isn't a valid CSS value.SCSSの掛け算の注意点（ポイント）
SCSSでは掛け算も割り算の方法と基本的には同じになります。ただし、掛け算の方が、割り算よりも自由度が高く、コンパイルミスやエラーが発生しにくくなります。
- 掛け算はカッコがなくても機能する。
- 単位はどちらか一方につける。
- 単位が２つ以上あるとコンパイルエラーになる。
- 単位をカッコの外につけてはいけない（コンパイル後にスペースが入る）
また、SCSSの計算処理で最も混乱させる要因の一つとして、掛け算だと計算がうまくいくのに、割り算では使えない記述があるということも注意したいところです。
SCSSの掛け算が上手くいく事例
以下の場合はコンパイル後に正しく計算が行われます。
width: (60px*2);
width: (60px * 2);
width: 60px * 2;
width: 60px*2;
width: 60*2px;CSSにコンパイルすると以下のようになります。
width: 120px;
width: 120px;
width: 120px;
width: 120px;
width: 120px;狙ったとおりの結果になっていることがわかります。
SCSSの掛け算がおかしくなる例
単位をスペースを空けて記述したり、カッコの外につけると、コンパイル結果がおかしくなります。
width: 60 * 2 px;
width: (60 * 2)px;
width: (60*2)px;CSSにコンパイルすると以下のようになります。
width: 120 px;
width: 120 px;
width: 120 px;正しく「120px」になっているように見えますが、数値と単位の間にスペースが入っているため、CSSが正しく認識できません。
SCSSの掛け算でコンパイルエラーになる例
計算式の中で単位を複数指定するとコンパイルエラーになります。
width: 60px * 2px;CSSにコンパイルすると以下のようになります。
1 ERROR in child compilations
SassError: 120px*px isn't a valid CSS value.足し算の場合
足し算の場合は、掛け算よりも更に自由度が高く、式の中に単位が複数あってもコンパイルが正常に行われます。
SCSSの足し算が上手くいく事例
以下の場合はコンパイル後に正しく計算が行われます。
width: (60px+2);
width: (60px + 2);
width: 60px + 2;
width: 60px+2;
width: 60+2px;
width: 60px+2px;
width: (60px + 2px);CSSにコンパイルすると以下のようになります。
width: 62px;
width: 62px;
width: 62px;
width: 62px;
width: 62px;
width: 62px;
width: 62px;狙ったとおりの結果になっていることがわかります。
SCSSの足し算がおかしくなる例
単位をスペースを空けて記述したり、カッコの外につけると、コンパイル結果がおかしくなります。
width: 60 + 2 px;
width: (60 + 2)px;
width: (60+2)px;CSSにコンパイルすると以下のようになります。
width: 62 px;
width: 62 px;
width: 62 px;正しく「62px」になっているように見えますが、数値と単位の間にスペースが入っているため、CSSが正しく認識できません。
引き算の場合
SCSSの引き算は足し算と同じく自由度が高く、式の中に単位が複数あってもコンパイルが正常に行われます。
SCSSの引き算が上手くいく事例
以下の場合はコンパイル後に正しく計算が行われます。
width: (60px-2);
width: (60px - 2);
width: 60px - 2;
width: 60px-2;
width: 60-2px;
width: 60px-2px;
width: (60px - 2px);CSSにコンパイルすると以下のようになります。
width: 58px;
width: 58px;
width: 58px;
width: 58px;
width: 58px;
width: 58px;
width: 58px;狙ったとおりの結果になっていることがわかります。
SCSSの足し算がおかしくなる例
単位をスペースを空けて記述したり、カッコの外につけると、コンパイル結果がおかしくなります。
width: 60 - 2 px;
width: (60 - 2)px;
width: (60-2)px;CSSにコンパイルすると以下のようになります。
width: 58 px;
width: 58 px;
width: 58 px;正しく「62px」になっているように見えますが、数値と単位の間にスペースが入っているため、CSSが正しく認識できません。
余り算出の％は使えない
SCSSでは、余りを算出する「％」を使った計算はできません。（横幅などの％と被るため）
width: (60px%2);
width: (60px % 2);
width: 60px % 2;
width: 60px%2;
width: 60%2px;
width: 60px%2px;
width: (60px % 2px);
width: 60 % 2 px;
width: (60 % 2)px;
width: (60%2)px;CSSにコンパイルすると以下のようになります。
width: 0px;
width: 0px;
width: 0px;
width: 0px;
width: 60% 2px;
width: 0px;
width: 0px;
width: 0 px;
width: 0 px;
width: 60% 2 px;単位としての「％」は四則演算でも使える
余りを算出する演算子としての「％」でなく、単位としての「％」は四則演算でも使うことができます。
width: 120%;
width: 100%;CSSにコンパイルすると以下のようになります。
width: 60% * 2;
width: 60% + 40;異なる単位が複数ある場合はコンパイルエラーになる
「％」と「px」など、異なる単位が複数ある場合はコンパイルエラーになります。
width: 60% + 25px;CSSにコンパイルすると以下のようになります。
SassError: 60% and 25px have incompatible units.
width: 60% + 25px;CSSのcalc関数の方が便利
なお、SCSSで四則演算を行おうとするよりも、CSSの「calc関数」を使う方が自由度が高いです。
calc関数を使えば単位が異なる計算することができます。
