算术运算

Sass支持数字数学运算符的标准集。它们在兼容的单位之间自动转换。

  • 加法,<expression> + <expression>
  • 减法,<expression> - <expression>
  • 乘法,<expression> * <expression>
  • 除法,<expression> / <expression>
  • 模除<expression> % <expression>

无单位数可以与任何单位的数一起使用。

单位不相容的数不能与加法、减法或模除一起使用。

一元操作符

您也可以把+-当成一元运算符使用,它们只取一个值:

  • +<expression>返回表达式的值而不改变它。
  • -<expression>返回表达式值的负值

-既可以当做减法使用,也可以当做一元操作符使用,在空格分隔的列表中,可能会造成混淆。按照以下规则确保正确的使用:

  • 在当减法使用时,在减号的两边都留空格。
  • 在负数或一元否定词之前写一个空格,而不是之后。
  • 如果在空格分隔的列表中,则将一元否定括在括号中。

-在Sass的不同含义按以下顺序排列:

  1. -作为标识符的一部分。唯一的例外是单位;Sass通常允许将任何有效标识符用作标识符,但是单位中不能包含连字符和数字。
  2. -在表达式和没有空格的字符数字之间,该数字被解析为减法。
  3. -在一个字面数字的开头,它被解析为一个负数。
  4. -两个数字之间不考虑空格,这是作为减法解析。
  5. -在除字符数字外的值之前,该值被解析为一元否定。

除法运算

一些CSS属性使用/分隔值多个值。这意味着Sass必须消除/作为属性值和/作为除法之间的歧义。为了实现这一功能,如果两个数字之间用/分隔,除非满足以下条件之一,否则Sass将以斜杠分隔而不是除法打印结果:

  • 任何一个表达式都不是一个字符数字。
  • 结果存储在变量中或由函数返回。
  • 该操作被圆括号包围,除非这些圆括号位于包含该操作的列表之外。
  • 结果用作另一个操作的一部分(除/之外)。

如果你想强制/被当作分隔符,你可以这样写#{<expression>} / #{<expression>}

单位

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%的写法。

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