SASS：表达式还是纯 CSS 斜线？答案

【问题标题】：SASS: expression or plain CSS slash?SASS：表达式还是纯 CSS 斜线？
【发布时间】：2015-05-07 19:00:48
【问题描述】：

我目前正在用 Go 实现一个 SASS 编译器 - c6，我在编写表达式解析器和求值器时发现了 Ruby SASS 编译器的一些奇怪行为。

SASS 参考在这里提到了纯 CSS '/' 和 SASS 除法表达式： http://sass-lang.com/documentation/file.SASS_REFERENCE.html#division-and-slash

设计是为了让 SASS 与原生 CSS 语法兼容，如下所示：

font: 10px/8px;             // Plain CSS, no division. looks fine.
font: 10px/8px + 3px;       // Expression
font: (10px/8px);           // Expression

上面看起来还可以，但是如果你写：

.foo {
  $a: 10px/8px;
  font: $a;
}

以上内容将被编译为：

.foo {
   font: 1.25; }

以下 SASS 中的正常表达式将始终是不带括号的表达式：

.foo {
  padding: 2px+2px;
  padding: 2px*3;
}

输出：

.foo {
  padding: 4px;
  padding: 6px; }

但是，以下 SASS 会产生不同的结果：

.foo {
  padding: 2px-1px;
  padding: 2px - 1px;
}

以上内容将被编译为：

.foo {
  padding: 2px-1px; // treated as ident instead of expression
  padding: 1px; }

除法运算符似乎是属性值的唯一例外，这使得语法不一致和模棱两可。（其实SASS规范中有这么多歧义的语法……）

那么问题来了：

如何使表达式语法一致并避免纯 CSS '/' 和除法运算符之间的隐式行为？（如果不考虑SASS的兼容性）
你会怎么做？

谢谢

【问题讨论】：

Stack Overflow 用于解决技术问题。 “我不知道我想象中的语言应该使用什么语法”不算是技术问题，这纯粹是一个自以为是的问题。
在programmers.se上可能会更好
@cimmanon：这里没有想象中的语言。 OP 正在实现一个 Sass 编译器，并询问如何处理特定的边缘情况。答案似乎是没有一致的方法可以做到这一点。
@BoltClock OP 声明“如果我们不考虑 SASS 的兼容性”，因此它不会完全是 Sass 编译器。
@BoltClock 如果 OP 想知道如何防止在 Sass 中发生分裂，那么这个问题与 stackoverflow.com/questions/4988944/scss-font-shorthand 重复（讽刺的是，你回答了：p）

标签： css parsing compiler-construction sass

【解决方案1】：

这是一种已知的语法歧义。 Some workarounds 之前已在 SASS github page 上讨论过。但从那里我真的不能提出更好的建议:(

我会怎么做？它不是特别适合 StackOverflow，但让我以您给出的 font: 10px/8px 为例。您使用了一个变量，所以我假设它是您打算多次使用的样式值。值本身 (10px/8px) 似乎相当明确地打算与font 一起使用，所以我会采取稍微不同的方法，并使用%silent-class：

%font {
    font: 10px/8px;
}

.foo {
    @extend %font;
    // more styling here
}
.bar {
    @extend %font;
    // etc
}

这编译正确，没有除法：

.foo {
    font: 10px/8px;
}
.bar {
    font: 10px/8px;
}

至于padding 示例，我认为这只是一致性不佳。希望他们能在不久的将来纠正这一点。如果还没有完成，如果您对此有强烈的感觉，那么submit an issue 对您来说不是一个坏主意，看看他们怎么说。

【讨论】：