Sass 操作符

上篇文章，我们探讨了关于SassScript数据类型的理解。这篇文章我们将一起学习Sass操作符。

Equality Operations

SassScript支持所有数据类型的一个操作：相等。 您可以使用==和！=运算符比较任意两个值，它们返回一个布尔值：

2 == 3 //false
2 != 3 //true

上面的示例使用的是数值，你可以比较任何数据类型：

$a: bold;
$b: italic;
$a == $b /* false */
$a != $b /* true */

在执行布尔运算时，SassScript遵循数据类型，如下例所示：

2 == "2" /* false */
"true" == true /* false /

此操作返回false，因为第一个操作数是数字，第二个操作数是字符串。 您不会在Sass代码中经常使用相等运算符，在控制指令中，你将会大量使用。

Boolean operations

与相等操作一样，布尔运算符返回布尔值（true或false）。 Sass支持三个布尔运算符：and，or 和 not。

and运算符仅当两个操作数都为真时，返回true：

true and true //returns true
true and false //returns false

or运算符只有有一个操作数为真时，返回true：

true or false //returns true
true or true //returns true
false or false //returns false

not运算符用来取反，它只是将值反转：

not true  //false
not false //true

Numeric Operations

SassScript允许你对数值进行算术和比较操作。

Basic Arithmetic

SassScript支持数值的所有标准算术运算：

1 + 1   //2 (加)
1 - 1   //0 (减)
2 * 3   //6 (乘)
(6 / 3) //2 (乘)
5 % 2   //5 (取余)
-3      //负数

请注意，我在运算符周围包含空格，但这不是必需的，因此1+1与1 + 1相同。

不幸的是，Sass与CSS语法兼容的要求在几个方面使代数运算符复杂化。 第一个是除法运算符。 虽然这不常见，但CSS允许使用字符来分隔数字，因此Sass必须尊重这一点。 如果我在没有括号的情况下编写，则转换器会将其输出为字符串而不是评估表达式。

解决方案是简单地用括号括起部分表达式或整个表达式：

（6）/ 3
（6/3）

如果你只写了空格，你将会得到一个负值列表。

5 -2 //含有两项值的列表

Comparison

除了对所有数据类型有效的相等性比较外，SassScript还支持比较两个值。 与==和！=运算符一样，所有这些都返回一个布尔值：

5 < 3  //false (小于)
5 > 3  //true (大于)
3 <= 3 //true (小于等于)
5 >= 3 //true (大于等于)

在这种情况下，Sass运算与CSS语法不冲突。

String Operations

Sass只支持字符串上的单个运算符，连接，但它支持多种类型的操作符。 最简单的是连接运算符：

"hello, " + "world"  // returns "hello, world"

Sass转换器将根据第一个操作数确定是否引用字符串：

p {
   content: "Hello " + world;
   font-family: sans + "-serif";
}

上面的代码将会输出：

p {
   content: "Hello world";
   font-family: sans-serif;
}

您可以通过将它们包装在插值运算符＃{}中来在字符串中使用表达式。

#plain-text {
   content: "I'm 1 + 2 years old";
}

#interpolated {
   content: "I'm #{1 + 3} years old";
}

上面的代码将会转换为：

#plain-text {
   content: "I'm 1 + 2 years old";
}

#interpolated {
   content: "I'm 4 years old";
}

Color Operations

SassScript允许您在两种颜色之间或颜色和数值之间执行算术运算。虽然很少需要使用RGB颜色操作，但是了解作为一个常识还是有必要的。

对两个颜色值执行算术运算时，Sass将每种颜色分为红色，绿色和蓝色分量，然后分别对每种颜色执行。

#102030 + #010203

Sass将首先将这两种颜色分解为红色，绿色和蓝色成分：（10,20,30）和（01,02,03）。 然后它将对每种颜色执行操作（在这种情况下，添加）：10 + 1表示红色，20 + 2表示绿色，30 + 3表示蓝色。 然后它将重新组合这些值，因此上面的表达式最终结果为#112233。

当您对颜色和数字执行操作时，Sass的功能基本相同：操作分别对每个颜色组件执行。 因此，给定表达式＃101010 * 2，结果将是＃202020。

这里的示例使用十六进制格式的颜色，但您也可以使用rgb，rgba，hsl和hsla。 有一点需要注意：如果您使用的颜色格式包含alpha值（rgba或hsla），则alpha值必须相同，并且它们不会包含在计算中：

rgba(55, 160, 0, .5) + rgba(10, 0, 0, .5); //rgba(65, 160, 0, 0.5)
rgba(55, 160, 0, .5) + rgba(10, 0, 0, 1);  //syntax error