防止 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 试图将这两个元素结合起来，尽管它在数学上没有意义。

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

这有什么合乎逻辑的原因吗？或者这只是成为规范的早期错误？可以避免吗？

Answer 1

我原来的帖子有两个问题，这是秒的答案（如何避免Sass计算表达式）。随意发布第一个的附加答案（为什么 Sass 会像它那样进行计算）。

我基本上想要实现的是让 Sass 将表达式视为一个字符串，该字符串原封不动地传递给纯 CSS。引用表达式不是解决办法，但是 Sass 有两种字符串：不带引号的字符串和带引号的字符串。

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

#{3n} + #{2}

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

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