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環境で計算させる方法になります。

 

Category: Webサイト作成Tags: cssscss

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

15 + 10 =