运算符

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

  • == 和 != 用于检查两个值是否相同。
  • +、-、*、/ 和 % 对数字具有通常的数学含义，对于单位具有特殊行为，与科学数学中单位的用法相匹配。
  • <、<=、> 和 >= 检查两个数字是否大于或小于另一个数字。
  • and、or 和 not 具有通常的布尔行为。Sass 认为除 false 和 null 之外的所有值都为“true”。
  • +、- 和 / 可用于连接字符串。

⚠️ 注意！

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

这种行为并不十分有用，因为逐通道的 RGB 算术与人类对颜色的感知不一致。添加了 颜色函数，它们更有用，并且颜色运算已弃用。它们在 LibSass 和 Ruby Sass 中仍然受支持，但会产生警告，并且强烈建议用户避免使用它们。

运算顺序 运算顺序 链接

Sass 具有相当标准的 运算顺序，从最紧密的到最松散的。

  1. 单目运算符 not、+、- 和 /。
  2. *、/ 和 % 运算符。
  3. + 和 - 运算符。
  4. >、>=、< 和 <= 运算符。
  5. == 和 != 运算符。
  6. and 运算符。
  7. or 运算符。
  8. = 运算符，在可用时。
游乐场

SCSS 语法

@debug 1 + 2 * 3 == 1 + (2 * 3); // true
@debug true or false and false == true or (false and false); // true
游乐场

Sass 语法

@debug 1 + 2 * 3 == 1 + (2 * 3)  // true
@debug true or false and false == true or (false and false)  // true

括号 括号 链接

您可以使用括号明确控制运算顺序。括号内的运算始终在括号外的任何运算之前进行。括号甚至可以嵌套，在这种情况下，最里面的括号将首先进行评估。

游乐场

SCSS 语法

@debug (1 + 2) * 3; // 9
@debug ((1 + 2) * 3 + 4) * 5; // 65
游乐场

Sass 语法

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

单等号 单等号 链接

Sass 支持一个特殊的 = 运算符，它只允许在函数参数中使用，它只创建一个 未加引号的字符串，其两个操作数由 = 分隔。这是为了向非常旧的 IE 专用语法提供向后兼容性。

游乐场

SCSS 语法

.transparent-blue {
  filter: chroma(color=#0000ff);
}
游乐场

Sass 语法

.transparent-blue
  filter: chroma(color=#0000ff)

CSS 输出

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