运算符

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

  • == and != are used to check if two values are the same.
  • +, -, *, /, and % have their usual mathematical meaning for numbers, with special behaviors for units that matches the use of units in scientific math.
  • <, <=, >, and >= check whether two numbers are greater or less than one another.
  • and, or, and not have the usual boolean behavior. Sass considers every value "true" except for false and null.
  • +, -, and / can be used to concatenate strings.

⚠️ Heads up!

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

¥Early on in Sass’s history, it added support for mathematical operations on colors. These operations operated on each of the colors’ RGB channels separately, so adding two colors would produce a color with the sum of their red channels as its red channel and so on.

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

¥This behavior wasn’t very useful, since it channel-by-channel RGB arithmetic didn’t correspond well to how humans perceive color. Color functions were added which are much more useful, and color operations were deprecated. They’re still supported in LibSass and Ruby Sass, but they’ll produce warnings and users are strongly encouraged to avoid them.

操作顺序操作顺序 permalink

¥Order of Operations

Sass 有一个相当标准的 操作顺序，从最紧到最松：

¥Sass has a pretty standard order of operations, from tightest to loosest:

  1. 一元运算符 not、+、- 和 /。

    ¥The unary operators not, +, -, and /.

  2. *、/ 和 % 运算符.

    ¥The *, /, and % operators.

  3. + 和 - 运算符.

    ¥The + and - operators.

  4. >、>=、< 和 <= 运算符.

    ¥The >, >=, < and <= operators.

  5. == 和 != 运算符.

    ¥The == and != operators.

  6. and 运算符.

    ¥The and operator.

  7. or 运算符.

    ¥The or operator.

  8. = 运算符，当它可用时。

    ¥The = operator, when it’s available.

SCSS Syntax

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

Sass Syntax

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

括号括号 permalink

¥Parentheses

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

¥You can explicitly control the order of operations using parentheses. An operation inside parentheses is always evaluated before any operations outside of them. Parentheses can even be nested, in which case the innermost parentheses will be evaluated first.

SCSS Syntax

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

Sass Syntax

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

单等于单等于 permalink

¥Single Equals

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

¥Sass supports a special = operator that’s only allowed in function arguments, which just creates an unquoted string with its two operands separated by =. This exists for backwards-compatibility with very old IE-only syntax.

SCSS Syntax

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

Sass Syntax

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

CSS Output

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