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

Question

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

/* Sass */
$color: #f44;
$sqrt2: sqrt(2);
$octTriW: (100% - (($sqrt2 * 100) / ($sqrt2 + 2))) / 2;
$octTri2Tri: ceil(100% - $octTriW * 2);

.octagon-sass {
  background:
    linear-gradient(-45deg,$color 50%,transparent 50%) 0% 0% / ($octTriW $octTriW),
    linear-gradient(45deg,$color 50%,transparent 50%) 100% 0 / ($octTriW $octTriW),
    linear-gradient(-135deg,$color 50%,transparent 50%) 0 100% / ($octTriW $octTriW),
    linear-gradient(135deg,$color 50%,transparent 50%) 100% 100% / ($octTriW $octTriW),
    linear-gradient($color,$color) 50% 50% / ($octTri2Tri 100%),
    linear-gradient($color,$color) 50% 50% / (100% $octTri2Tri);
}

/* CSS */
:root {
  --color: #f44;
  --sqrt2: 1.4142;
  --octTriW: calc(100% - ((var(--sqrt2) * 100) / (var(--sqrt2) + 2)) / 2);
  --octTri2Tri: calc(100% - var(--octTriW) * 2 + 0.6);
}
.octagon-root {
  background:
    linear-gradient(-45deg,var(--color) 50%,transparent 50%) 0% 0% / var(--octTriW) var(--octTriW),
    linear-gradient(45deg,var(--color) 50%,transparent 50%) 100% 0 / var(--octTriW) var(--octTriW),
    linear-gradient(-135deg,var(--color) 50%,transparent 50%) 0 100% / var(--octTriW) var(--octTriW),
    linear-gradient(135deg,var(--color) 50%,transparent 50%) 100% 100% / var(--octTriW) var(--octTriW),
    linear-gradient(var(--color),var(--color)) 50% 50% / var(--octTri2Tri) 100%,
    linear-gradient(var(--color),var(--color)) 50% 50% / 100% var(--octTri2Tri);
}

/* Base style of shape */
.shape {
  background-repeat: no-repeat;
  display: inline-block;
  outline: 1px solid #bbb;
  width: 200px;
  height: 200px;
}

<div class="shape octagon-sass"></div>
<div class="shape octagon-root"></div>

目前，Sass版本没有任何问题，但由于与calc()和--octTriW的{​​{1}}表达式有关，因此普通的CSS版本根本不会显示在--octTri2Tri下，我似乎无法弄清楚它是什么。以下是正在发生的事情的屏幕截图（标记变量的用途）：

我尝试移动％s并添加更多但没有运气。知道我可能遗失或做错了吗？

（参见CodePen上的演示）

Answer 1

每当您使用加法或减法时，您需要在100%中添加或减去像素或百分比值。为了与您的SASS变体等效，可以通过将%应用于计算来修复变量定义。此外，您缺少括号。

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

Updated Codepen.