我试图在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函数中的变量？
当前回答
插值：
body
height: calc(100% - #{$body_padding})
在这种情况下，边框也足够了：
body
box-sizing: border-box
height: 100%
padding-top: $body_padding
其他回答
我试过了，然后解决了我的问题。它将根据给定速率（基本大小/速率大小）自动计算所有媒体断点
$base-size: 16;
$rate-size-xl: 24;
// set default size for all cases;
:root {
--size: #{$base-size};
}
// if it's smaller then LG it will set size rate to 16/16;
// example: if size set to 14px, it will be 14px * 16 / 16 = 14px
@include media-breakpoint-down(lg) {
:root {
--size: #{$base-size};
}
}
// if it is bigger then XL it will set size rate to 24/16;
// example: if size set to 14px, it will be 14px * 24 / 16 = 21px
@include media-breakpoint-up(xl) {
:root {
--size: #{$rate-size-xl};
}
}
@function size($px) {
@return calc(#{$px} / $base-size * var(--size));
}
div {
font-size: size(14px);
width: size(150px);
}
要在height属性的calc（）中使用$variables，请执行以下操作：
HTML格式：
<div></div>
scs：
$a: 4em;
div {
height: calc(#{$a} + 7px);
background: #e53b2c;
}
尽管它没有直接关系。但我发现，如果你没有正确放置空格，CALC代码将无法工作。
因此，这不适用于我的calc（#{$a}+7px）
但这是有效的计算（#{$a}+7px）
我花了一些时间才弄清楚。
试试看：
@mixin heightBox($body_padding){
height: calc(100% - $body_padding);
}
body{
@include heightBox(100% - 25%);
box-sizing: border-box
padding:10px;
}
插值：
body
height: calc(100% - #{$body_padding})
在这种情况下，边框也足够了：
body
box-sizing: border-box
height: 100%
padding-top: $body_padding
