经营者

Sass支持使用少数几个有用operators的值。其中包括标准的数学运算符,例如+*,以及各种其他类型的运算符:

  • ==!=用于检查两个值是否相同。
  • +-*/,并%有数字他们通常的数学含义,同时,对于在科学的数学使用单位的一致单位特殊行为。
  • <<=>,并>=检查是否两个数字都大于或小于另一个。
  • andornot具有通常的布尔行为。Sass认为除false 和之外的每个值都是“ true” null
  • +-/可用于连接字符串。

Head️抬头!

在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; // 6
@debug ((1 + 2) * 3 + 4) * 5; // 65

Sass语法

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

单一等于永久链接单一等于

Sass支持=仅在函数参数中允许的特殊运算符,该运算符仅创建一个无引号的字符串,其两个操作数之间用分隔=。存在此点是为了与非常老的IE- only语法向后兼容。

SCSS  语法

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

Sass语法

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

CSS  输出

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