【SASS、SCSS】calcの計算式で変数を使うときの記述方法

このページをご覧になられたということは、SCSSでcalc()関数をご使用になられた方でしょうか。 そしてcalcの計算式に変数を入れたものの、上手く計算されないという状況でしょうか。

ご安心下さい、変数が含まれてても無事に計算できます。

以下の例はヘッダーの高さを80pxに固定し、メイン要素の高さをブラウザの高さに合わせて可変にしたい場合の計算式です。 赤線のcalcの計算式に、そのまま「$header-height」の変数を入れても、計算が上手くいきません。 それもそのはず、calcの計算式でSCSSの変数を使う場合、#{$変数名}と入力する必要があります。 以下ご確認ください。

See the Pen wvwrNNr by DoGgy (@DoGgy12) on CodePen.

これで無事に計算が出来ました。

calcの四則演算のルール

実は上と別のパターンでも、calcの計算でハマったことがありますので記録しておきます。 calcで四則演算を行う場合には、以下のルールに従う必要があります。

基本ルール

まずはサクっと簡単なルールから。

• ＋(加算)または－(減算)は前後に必ず半角スペースを入れる
• *(乗算)と/(除算)は入れなくてもよい。ただし判別しやすい様、入れておくことが望ましい。
• 入れ子の計算も可能　例：calc(100px + (25px * 4));
• 単位が異なる場合でも計算できる。　例：calc(100px – 20%) ;

この赤文字の部分がcalcの良いところでもあるのですが、ほんの少しだけ紛らわしい。

乗算のルール

単位有りの数字　×　単位有りの数字　＝　計算不可　になってしまいます。 私はこのルールを理解しておらず、px同士の割り算を行おうとしてハマりました。