Numbers

Sass中的数字有两个组成部分:数字本身和它的单位。例如,在16px中,数字是16,单位是px。数字可以没有单位,也可以有复杂的单位。查看单位的更多细节。

Sass数字支持与CSS数字相同的格式,包括科学表示法,该表示法的e值介于数字和10的幂之间。由于历史上浏览器对科学符号的支持一直参差不齐,所以Sass总是将其编译为完全展开的数字。

Sass不区分整数和小数,例如5/2返回2.5而不是2。这与JavaScript的行为相同,但与许多其他编程语言不同。

单位

Sass对操作基于计量单位的单位计算提供了强大的支持。当两个数相乘时,它们的单位也相乘。当一个数除以另一个数时,结果取第一个数的分子单位和第二个数的分母单位。一个数在分子和/或分母上可以有任意数量的单位。

因为CSS不支持像素*像素这样的复杂单位,所以使用带有复杂单位的数字作为属性值会产生错误。不过,这是一个伪装的特性;如果你没有得到正确的单位,这通常意味着你的计算出了问题!记住,您可以使用@debug规则来检查任何变量或表达式的单位。

Sass将自动兼容不同单位类型间的转换,尽管它将为结果选择哪个单元取决于使用的是哪种Sass实现。如果您试图组合不兼容的单元,比如1in + 1em, Sass将抛出会抛错。

在实际的单位计算中,如果分子中包含的单位与分母中的单位(比如96px / 1in)相匹配,那么它们就会相互抵消。这样就很容易定义一个比率,您可以使用它在单位之间进行转换。在下面的示例中,我们将所需的速度设置为每50个像素1秒,然后将其乘以transition覆盖的像素数,以获得所需的时间。

在实际的单位计算中,如果分子中包含的单位与分母中的单位(比如96px / 1in)相匹配,那么它们就会相互抵消。这样就很容易定义一个比率,您可以使用它在单位之间进行转换。在下面的示例中,我们将所需的速度设置为每50个像素1秒,然后将其乘以转换覆盖的像素数,以获得所需的时间。

您应该特别避免使用像#{$number}px这样的内插。这实际上并没有创建一个数字!它创建了一个看起来像数字的无引号字符串,不能用于任何数字操作函数。试着把你的数字单位提取出来,这样$number就已经有了单位px,或者写成$number * 1px

Sass中的百分比和其他单位一样有效。它们不能与小数互换,因为在CSS中小数和百分数的含义不同。例如,50%是一个以%为单位的数字,Sass认为它与0.5不同。

可以使用单位算术在小数和百分数之间进行转换。$percentage / 100%将返回对应的小数,$decimal * 100%将返回对应的百分比。还可以使用percent()作为更显式的$decimal * 100%的写法。

精度

兼容性:Dart Sass ✓ |LibSass ✗|Ruby Sass 3.5.0+

LibSass和旧版本的Ruby Sass默认为5位数字精度,但是可以配置为使用不同的数字。建议用户将它们配置为10位,以获得更高的精度和向前兼容性。

Sass数字支持小数点后最多10位的精度。这意味着一些不同的事情:

  • 生成的CSS中只包含小数点后数字的前十位。
  • 如果小数点后10位之前是相同的,像==>=这样的操作会认为两个数字是等价的。
  • 如果一个数字与一个整数的距离小于0.0000000001,那么对于像nth()这样需要整数参数的函数来说,它就是一个整数。

当数字在与精度相关的地方使用时,它们会延迟四舍五入到精度为10位的数字。这意味着数学函数将在内部处理完整的数值,以避免积累额外的舍入错误。

上次更新: 2019-11-5 4:49:11 PM