css - CSS calc() 関数の Sass 変数

Question

calc()Sass スタイルシートで関数を使用しようとしていますが、いくつか問題があります。これが私のコードです：

$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ですか?

Answer 1

補間:

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

この場合、border-boxでも十分です。

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

Answer 2

これを試して：

@mixin heightBox($body_padding){
   height: calc(100% - $body_padding);
}

body{
   @include heightBox(100% - 25%);
   box-sizing: border-box
   padding:10px;
}