SCSS/SASS 函数。大众减像素

Question

问题是：我不知道哪里错了：

  @function calcSize($value) {
  $containerWidth: calc(100vw - 405px);
  $initialContainer: 1278;
  $result: $value * $containerWidth / $initialContainer;
  @return $result;
}

我正在尝试使用它：

.module-title {
font-weight: 700;
font-size: calcSize(45);
}

但我出错了：“未定义的操作“45 * calc(100vw - 405px)””

Answer 1

需要将 calc() 函数发送到客户端，以便每次调整浏览器大小时重新计算 100vw 元素。

但是，您在服务器端公式 ($value * $containerWidth / $initialContainer) 中使用了它，需要在将其发送到浏览器之前 对其进行处理。

您可能需要做的是 Sass 呈现一个包含所有部分的 calc() 公式，然后将其发送给客户端进行计算：

@function calcSize($value) { $initialContainer: 1278; $result: calc($value * (100vw - 405px) / $initialContainer); @return $result; }

（理论上，SCSS 可以解决您的意思，但实现起来可能相当复杂。）

SCSS/SASS 函数。大众减像素

SCSS/SASS function. VW minus pixels

sass