1. ホーム
  2. css

[解決済み] CSS calc()関数内のSass変数

2022-03-18 19:32:43

質問

を使おうとしているのですが calc() 関数を使用することができますが、いくつかの問題があります。以下は私のコードです。

$body_padding: 50px

body
    padding-top: $body_padding
    height: calc(100% - $body_padding)

もし、リテラル 50px の代わりに body_padding という変数があれば、まさに私が望むものが得られる。しかし、変数に切り替えると、このような出力になります。

body {
    padding-top: 50px;
    height: calc(100% - $body_padding);
}

の中の変数を置き換える必要があることを Sass に認識させるにはどうすればよいですか? calc 関数を使用できますか?

どのように解決するのですか?

インターポレート :

body
    height: calc(100% - #{$body_padding})

今回の場合 ボーダーボックス で十分です。

body
    box-sizing: border-box
    height: 100%
    padding-top: $body_padding