はてなブックマーク

このページをご覧になられたということは、SCSSでcalc()関数をご使用になられた方でしょうか。 そしてcalcの計算式に変数を入れたものの、上手く計算されないという状況でしょうか。 ご安心下さい、変数が含まれてても無事に計算できます。 以下の例はヘッダーの高さを80pxに固定し、メイン要素の高さをブラウザの高さに合わせて可変にしたい場合の計算式です。 赤線のcalcの計算式に、そのまま「$header-height」の変数を入れても、計算が上手くいきません。 それもそのはず、calcの計算式でSCSSの変数を使う場合、#{$変数名}と入力する必要があります。 以下ご確認ください。 See the Pen wvwrNNr by DoGgy (@DoGgy12) on CodePen. これで無事に計算が出来ました。 calcの四則演算のルール 実は上と別のパターンでも、calcの計算でハ