SCSSでcalc(計算)を使う方法

SCSSでcalc(計算)を使う方法

先日SCSSを使っていたら数値の計算でエラーが発生して一人でハマってました。

そこで解決方法を見つけたので、メモがてらブログ記事にまとめました。

目次

変数を使った場合

SCSSでの書き方

$var: 20%;
.contents {
margin-right: calc(100%-#{$var});
}

CSSでの出力結果

.contents {
margin-right: calc(100%-20%);
}

変数を使わない場合

SCSSでの書き方

.contents {
margin-right: calc(100%-#{20%});
}

CSSでの出力結果

.contents {
margin-right: calc(100%-20%);
}

calcを使わない場合

SCSSでの書き方

.contents {
margin-right: 100%-#{20%};
}

CSSでの出力結果

.contents {
margin-right: 100%-20%;
}

 

以上がSCSS環境で計算させる方法になります。

 

よかったらシェアしてね!

関連広告

コメント

コメントする

ten + 14 =

目次
閉じる