CSS calc（）函数中的Sass变量

提问者：小点点

我试图在Sass样式表中使用函数，但是遇到了一些问题。下面是我的代码:

$body_padding: 50px

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

如果我使用文本而不是我的变量，我将得到我想要的结果。但是，当我切换到变量时，这是输出:

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

如何让Sass认识到它需要替换函数中的变量？

共3个答案

匿名用户

插值:

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

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

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

匿名用户

要在height属性的中使用，请执行以下操作:

HTML:

<div></div>

SCSS:

$a: 4em;

div {
  height: calc(#{$a} + 7px);
  background: #e53b2c;
}

匿名用户

尽管这并不直接相关。但我发现，如果您没有正确地放空格，计算代码将无法工作。

所以这对我不起作用

但这起作用

我花了点时间才弄明白。