1

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

在此处输入图像描述

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

（参见CodePen上的演示）

4

1 回答 1

0

每当您使用加法或减法时，您都需要从100%. 为了等同于您的 SASS 变体，可以通过应用于%计算来修复变量定义。此外，您缺少括号。

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

更新了 Codepen。

于 2017-03-21T21:42:38.360 回答