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

Question

我对Bourbon Neat的omega()函数有一些奇怪的问题，所以我查看了源代码，在那里我看到了nth()函数的使用。

在SassMeister中尝试nth后，我看到所有Sass引擎都产生相同的奇怪输出：

输入.scss

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

将产生

输出.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 );
}