概述 Overview

Sass 支持一些有用的“运算符”来处理不同的值。 其中包括标准数学运算符,如“+”和“*”,以及各种其他类型的运算符

  • ==!= 用于检查两个值是否相同。
  • +-*/% 对数字具有通常的数学意义,对与使用相匹配的单位具有特殊行为 科学数学中的单位。
  • <<=>>= 检查两个数字是大于还是小于彼此。
  • andornot 具有通常的布尔行为。 Sass 认为每个值都是“真”,除了“假”和“空”。
  • +-/ 可用于连接字符串。

⚠️ 注意!

在 Sass 历史的早期,它添加了对 colors 数学运算的支持。 这些操作分别对每种颜色的 RGB 通道进行操作,因此添加两种颜色会产生一种颜色,其红色通道的总和作为其红色通道,依此类推。

这种行为不是很有用,因为它的逐通道 RGB 算法与人类感知颜色的方式不相符。 Color functions 添加了更有用的功能,并且不推荐使用颜色操作。 LibSass 和 Ruby Sass 仍然支持它们,但它们会产生警告,强烈建议用户避免使用它们。

操作顺序

Sass 有一个非常标准的操作顺序,从最紧到最松:

  1. The unary operators not, +, -, and /.
  2. The *, /, and % operators.
  3. The + and - operators.
  4. The >, >=, < and <= operators.
  5. The == and != operators.
  6. The and operator.
  7. The or operator.
  8. = 运算符,当它可用时。
scss
Scss
scss
@debug 1 + 2 * 3 == 1 + (2 * 3); // true
@debug true or false and false == true or (false and false); // true

括号

您可以使用括号显式控制运算顺序。 括号内的操作总是先于括号外的任何操作进行评估。 括号甚至可以嵌套,在这种情况下,最里面的括号将首先被计算。

scss
Scss
scss
@debug (1 + 2) * 3; // 9
@debug ((1 + 2) * 3 + 4) * 5; // 65

单等于

Sass 支持一种特殊的 = 运算符,它只允许在函数参数中使用,它只创建一个 unquoted string,其两个操作数由 = 分隔。 这是为了向后兼容非常旧的 IE-only 语法。

scss
Scss
scss
.transparent-blue {
  filter: chroma(color=#0000ff);
}