css - 如何在 Stylus 中实现单元安全？

Question

我想在我的元素中使用 CSS 预处理器，所以我选择了 Stylus。今天我发现 Stylus 编译了这个:

body {
  width: 100% + 50px;
}

对此:

body {
  width: 150%;
}

当两个值都是变量时，这可能会令人惊讶。例如，如果我在我的规则中有这样的表达:

my-element {
  width: $some-value + $some-other-value + $some-more-value;
}

如果我更改其中一个变量的单位，例如，从像素更改为百分比，那么表达式将悄无声息地中断。因此，如果我想更改单位，我必须检查整个元素中此变量的所有用法，并检查它是否正常。

有没有办法在手写笔中实现某种单元安全？一个完美的解决方案是 Stylus 可以为这种情况生成 calc(100% + 50px) 并在控制台中给我一个警告。但即使只是某处的警告或错误就足够了。

Answer 1

如果您想使用 native CSS calc，而不是手写笔版本，您可以使用 sprintf实现它。它将像您期望的那样解析不同的单位，这与手写笔通过转换单位来处理数学的方式不同。例如:

width: 'calc(%s + %s + %s)' % ($some-value $some-other-value $some-more-value)