一尘不染

CSS calc() 函数中的 Sass 变量

javascript

我正在尝试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函数中的变量?


阅读 137

收藏
2022-02-17

共1个答案

一尘不染

Interpolate:

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

对于这种情况,border-box也足够了:

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