涉及变量的CSS calc（）表达式存在问题

我正在尝试通过Sass和不通过Sass绘制CSS八角形，并且我正在为这两个版本使用变量。对于2的平方根、一个三角形的宽度以及八角形内两个三角形之间的距离，我使用了几乎相同的表达式

/*Sass*/
$color:#f44；
$sqrt2:sqrt（2）；
$octTriW:（100%-（$sqrt2*100）/（$sqrt2+2））/2；
$octTri2Tri:ceil（100%-$octTriW*2）；
八边形sass{
背景：
线性渐变（-45度，$50%颜色，50%透明），0%0%/（$octTriW$octTriW），
线性渐变（45度，$50%颜色，50%透明）100%0/（$octTriW$octTriW），
线性渐变（-135deg，$color 50%，transparent 50%）0 100%/（$octTriW$octTriW），
线性渐变（135度，$50%颜色，50%透明）100%100%/（$octTriW$octTriW），
线性渐变（$color，$color）50%50%/（$octTri2Tri 100%），
线性渐变（$color，$color）50%50%/（100%$octTri2Tri）；
}
/*CSS*/
：根{
--颜色：#f44；
--sqrt2:1.4142；
--八分之一：计算（100%-（（var（--sqrt2）*100）/（var（--sqrt2）+2））/2）；
--octTri2Tri:calc（100%-var（--octTriW）*2+0.6）；
}
八边形根{
背景：
线性梯度（-45度，var（--颜色）50%，透明50%）0%0%/var（--octTriW）var（--octTriW），
线性梯度（45度，var（--颜色）50%，透明50%）100%0/var（--octTriW）var（--octTriW），
线性梯度（-135度，var（--颜色）50%，透明50%）0 100%/var（--八位三瓦）var（--八位三瓦），
线性梯度（135度，var（--color）50%，透明50%）100%100%/var（--octTriW）var（--octTriW），
线性梯度（var（--color），var（--color））50%50%/var（--octTri2Tri）100%，
线性梯度（var（--颜色），var（--颜色））50%50%/100%var（--octTri2Tri）；
}
/*基本造型*/
.形状{
背景重复：无重复；
显示：内联块；
外形：1px实心#bbb；
宽度：200px；
高度：200px；
}

现在，Sass版本没有问题，但是常规的CSS版本根本不会出现，因为它与

--octTriW

和

--octTri2Tri

的

:root

下的

calc（）

表达式有关，我似乎不知道它是什么。下面是正在发生的事情的屏幕截图（标记变量的用途）：

我尝试移动%s并添加更多，但没有成功。你知道我可能遗漏了什么或做得不对吗

---

（请参见上的演示）

无论何时使用加法或减法，都需要从

100%

中添加或减去像素值或百分比值。为了与SASS变量等效，可以通过将

%

应用于计算来修正变量定义。此外，缺少括号

--octTriW: calc((100% - ((var(--sqrt2) * 100%) / (var(--sqrt2) + 2))) / 2);
                ^                           ^                       ^    
--octTri2Tri: calc(100% - var(--octTriW) * 2 + 0.6%);
                                                  ^ 

---

无论何时使用加法或减法，都需要从

100%

中添加或减去像素值或百分比值。为了与SASS变量等效，可以通过将

%

应用于计算来修正变量定义。此外，缺少括号

--octTriW: calc((100% - ((var(--sqrt2) * 100%) / (var(--sqrt2) + 2))) / 2);
                ^                           ^                       ^    
--octTri2Tri: calc(100% - var(--octTriW) * 2 + 0.6%);
                                                  ^ 

---

在

calc（）

中，您需要有

px

。作为一项测试更改，这是：

calc（100%-（（var（--sqrt2）*100）/（var（--sqrt2）+2））/2）对此：
calc（100%-（（var（--sqrt2）*100px）/（var（--sqrt2）+2））/2）
在
calc（）
中，您需要有
px
。作为一项测试更改，这是：
calc（100%-（（var（--sqrt2）*100）/（var（--sqrt2）+2））/2）对此：
calc（100%-（（var（--sqrt2）*100px）/（var（--sqrt2）+2））/2）