☰

CSS calc() 関数の Sass 変数 質問する

tag-icon • tag-icon css sass css-calc
CSS calc() 関数の Sass 変数 質問する

Sass スタイルシートで関数を使用しようとしています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?

ベストアンサー1

補間:

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

この場合、ボーダーボックス以下でも十分でしょう:

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

おすすめ記事