在 Sass 中，数字类型包括了长度、持续时间、频率、角度等等无单位数字类型。Sass 允许在运行中计算这些度量值。 ## 零值 当数字小于 `1` 时，应该在小数点前写出 `0.` 永远不要显示小数尾部的 `0`。 ~~~ // Yep .foo { padding: 2em; opacity: 0.5; } // Nope .foo { padding: 2.0em; opacity: .5; } ~~~ ## 单位 当定义长度时，`0` 后面不需要加单位。 ~~~ // Yep $length: 0; // Nope $length: 0em; ~~~ 在 Sass 中最常见的错误，是简单地认为单位只是字符串，认为它会被安全的添加到数字后面。这虽然听起来不错，但却不是单位正确的解析方式。可以把单位认为是代数符号，例如，在现实世界中，`5` 英寸乘以 `5` 英寸得到 `25` 平方英寸。Sass 也适用这样的逻辑。 将一个单位添加给数字的时候，实际上是让该数值乘以_`1`个单位_。 ~~~ $value: 42; // Yep $length: $value * 1px; // Nope $length: $value + px; ~~~ 需要注意的是加上一个 _`0unit`_ 也可以正确解析，但是这种方式在某种程度上会造成一些混乱，所以我更愿意推荐上面的方式。事实上，将一个数字转换为其他兼容单位时，加 `0` 操作并不会造成错误。 ~~~ $value: 42 + 0px; // -> 42px $value: 1in + 0px; // -> 1in $value: 0px + 1in; // -> 96px ~~~ 这一切最终取决于你想要达到怎样的效果。只要记住，像添加一个字符串一样添加一个单位并不是一种好的处理方式。 要删除一个值的单位，你需要除以_相同类型的 `1` 单位_。 ~~~ $length: 42px; // Yep $value: $length / 1px; // Nope $value: str-slice($length + unquote(''), 1, 2); ~~~ 给一个数值以字符串形式添加单位的结果是产生一个字符串，同时要防止对数据的额外操作。从一个带有单位的数值中分离数字部分也会产生字符串，但这些都不是你想要的。 ## 计算 **最高级运算应该始终被包裹在括号中**。这么做不仅是为了提高可读性，也是为了防止一些 Sass 强制要求对括号内内容计算的极端情况。 ~~~ // Yep .foo { width: (100% / 3); } // Nope .foo { width: 100% / 3; } ~~~ ## MAGIC NUMBERS “幻数”，是[古老的学校编程](http://en.wikipedia.org/wiki/Magic_number_(programming)#Unnamed_numerical_constants)给_未命名数值常数_的命名。基本上，它们只是_能工作_™但没有任何逻辑思维的随机数。 相信不用多说你也会理解，**幻数是一场瘟疫，应不惜一切代价以避免**。当你对数值的解析方式无法找到一个合理解释时，你可以对此提交一个内容宽泛的评论，包括你是怎样遇见这个问题以及你认为它应该怎样工作。承认自己不清楚一些机制的解析方式，远比让以后的开发者从零开始弄清它们更有帮助。 ~~~ /** * 1\. Magic number. This value is the lowest I could find to align the top of * `.foo` with its parent. Ideally, we should fix it properly. */ .foo { top: 0.327em; /* 1 */ } ~~~ ## 扩展阅读 * [Use Lengths, Not Strings](http://hugogiraudel.com/2013/09/03/use-lengths-not-strings/) * [Correctly Adding Unit to Number](http://css-tricks.com/snippets/sass/correctly-adding-unit-number/) * [Magic Numbers in CSS](http://css-tricks.com/magic-numbers-in-css/) * [Sassy-Math](https://github.com/at-import/sassy-math)