css - 速记属性中的 SASS 变量没有空格

Question

在 SASS 的速记属性中使用 SASS 变量时，如下所示:

$variable : 40px
margin : 0 auto -$variable auto;

它像这样编译成 CSS:

margin : 0 auto-40px auto

这当然会产生错误。有没有办法让 SASS 编译为

margin : 0 auto -40px auto

相反？换句话说，如何确保变量前有空格？

Answer 1

只需将您的代码更改为:

margin : 0 auto (-$variable) auto;

这避免了 SASS 将 auto -$variable 解释为“auto”和 40 像素 (auto-40px) 之间的差异。

根据 SASS Guidelines :

Top-level numeric calculations should always be wrapped in parentheses. Not only does this requirement dramatically improve readability, it also prevents some edge cases by forcing Sass to evaluate the contents of the parentheses.