我试图在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函数中的变量？
当前回答
这是一个使用SASS/SCSS和数学公式样式的非常简单的解决方案：
/* frame circle */
.container {
position: relative;
border-radius: 50%;
background-color: white;
overflow: hidden;
width: 400px;
height: 400px; }
/* circle sectors */
.menu-frame-sector {
position: absolute;
width: 50%;
height: 50%;
z-index: 10000;
transform-origin: 100% 100%;
}
$sector_count: 8;
$sector_width: 360deg / $sector_count;
.sec0 {
transform: rotate(0 * $sector_width) skew($sector_width);
background-color: red; }
.sec1 {
transform: rotate(1 * $sector_width) skew($sector_width);
background-color: blue; }
.sec2 {
transform: rotate(2 * $sector_width) skew($sector_width);
background-color: red; }
.sec3 {
transform: rotate(3 * $sector_width) skew($sector_width);
background-color: blue; }
.sec4 {
transform: rotate(4 * $sector_width) skew($sector_width);
background-color: red; }
.sec5 {
transform: rotate(5 * $sector_width) skew($sector_width);
background-color: blue; }
.sec6 {
transform: rotate(6 * $sector_width) skew($sector_width);
background-color: red; }
.sec7 {
transform: rotate(7 * $sector_width) skew($sector_width);
background-color: blue; }
最后，我强烈建议您理解变换原点、旋转（）和倾斜（）：
https://tympanus.net/codrops/2013/08/09/building-a-circular-navigation-with-css-transforms/
其他回答
尽管它没有直接关系。但我发现，如果你没有正确放置空格，CALC代码将无法工作。
因此，这不适用于我的calc（#{$a}+7px）
但这是有效的计算（#{$a}+7px）
我花了一些时间才弄清楚。
要在height属性的calc（）中使用$variables，请执行以下操作：
HTML格式：
<div></div>
scs：
$a: 4em;
div {
height: calc(#{$a} + 7px);
background: #e53b2c;
}
插值：
body
height: calc(100% - #{$body_padding})
在这种情况下，边框也足够了：
body
box-sizing: border-box
height: 100%
padding-top: $body_padding
这是一个使用SASS/SCSS和数学公式样式的非常简单的解决方案：
/* frame circle */
.container {
position: relative;
border-radius: 50%;
background-color: white;
overflow: hidden;
width: 400px;
height: 400px; }
/* circle sectors */
.menu-frame-sector {
position: absolute;
width: 50%;
height: 50%;
z-index: 10000;
transform-origin: 100% 100%;
}
$sector_count: 8;
$sector_width: 360deg / $sector_count;
.sec0 {
transform: rotate(0 * $sector_width) skew($sector_width);
background-color: red; }
.sec1 {
transform: rotate(1 * $sector_width) skew($sector_width);
background-color: blue; }
.sec2 {
transform: rotate(2 * $sector_width) skew($sector_width);
background-color: red; }
.sec3 {
transform: rotate(3 * $sector_width) skew($sector_width);
background-color: blue; }
.sec4 {
transform: rotate(4 * $sector_width) skew($sector_width);
background-color: red; }
.sec5 {
transform: rotate(5 * $sector_width) skew($sector_width);
background-color: blue; }
.sec6 {
transform: rotate(6 * $sector_width) skew($sector_width);
background-color: red; }
.sec7 {
transform: rotate(7 * $sector_width) skew($sector_width);
background-color: blue; }
最后，我强烈建议您理解变换原点、旋转（）和倾斜（）：
https://tympanus.net/codrops/2013/08/09/building-a-circular-navigation-with-css-transforms/
试试看：
@mixin heightBox($body_padding){
height: calc(100% - $body_padding);
}
body{
@include heightBox(100% - 25%);
box-sizing: border-box
padding:10px;
}
