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 版本没有问题，但是常规的 CSS 根本不会出现，因为与我的 calc() 表达式有关 --octTriW 和 --octTri2Tri 在 :root 下，我似乎无法弄清楚它是什么。这是正在发生的事情的屏幕截图（带有变量用途的标记）：

我尝试移动 %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.

CSS 涉及变量的 calc() 表达式的问题

Issue with CSS calc() Expressions Involving Variables

css

sass

css-variables