防止Sass使用无单位数字的单位添加数字

Question

我在Bourbon Neat的omega()函数中遇到了一些奇怪的问题，所以我查看了source code，在那里我看到了使用nth()函数。

在SassMeister I see that all Sass engines produce the same weird output中尝试nth之后：

input.scss

.foo {
  content: nth(5n + 3, 1 );
}

将产生

output.css

.foo {
  content: 8n;
}

正如你所看到的，它用我的表达做了一些奇怪的“数学”。似乎Sass试图将两个元素结合起来，尽管它在数学上没有意义。

这对使用此函数的mixin有一些不良后果，因为我希望@include omega(4n+4)创建4n+4的伪选择器（跳过前4个，然后应用于每个4,8,12） ...），但它会创建8n（应用于每个第8个元素）。

有没有合理的理由说明为什么会这样或者这只是一个早期的错误而成为规范？可以避免吗？

Answer 1

我的原帖中有两个问题，这是 second 的答案（如何避免Sass计算表达式）。随意为第一个发布一个额外的答案（为什么Sass会进行计算）。

我基本上想要实现的是让Sass将表达式视为一个字符串，不加改变地传递给纯CSS。引用表达式不是解决方案，但Sass有两种字符串：unquoted和quoted strings。

一位同事向我展示了如何创建一个不带引号的3n + 2：

字符串

#{3n} + #{2}

这会创建三个字符串：3n，+和2，然后连接成一个字符串。所以问题中代码的最终解决方案是：

.foo {
  content: nth(#{5n} + #{3}, 1 );
}