在本文中，我们将会解析一下 Sass 中的操作符。
Sass 使用冒号（ : ）来定义一个变量：
$main-color: lightgray;
算术操作符用于执行数学计算，下面是 Sass 所支持的算术操作符：
| 操作符 | 简介 |
|---|---|
+ |
加 |
- |
减 |
* |
乘 |
/ |
除 |
% |
取余 |
在下一小节中你会发现，
+操作符也可以用来拼接字符串。
注意，上面的操作符只能用于单位相同的数值运算：
h2 {
font-size: 5px + 2em; // 单位不一致，编译报错
font-size: 5px + 2; // 7px
}
此外，两个单位相同的数值相乘无法生成有效的 CSS：
h2 {
font-size: 5px * 2px; // invalid CSS
}
如你所知，/ 操作符本身就是 CSS 简写语法的一部分，比如：
font: 16px / 24px Arial sans-serif;
background: url("http://example.com") no-repeat fixed center / cover;
但是，Sass 重载了该运算符，用于执行除法操作，下面让我们看看它是如何解析的：
h2 {
// 不执行除法操作，原样输出
font-size: 16px / 24px;
// 使用插值语法之后，原样输出
font-size: #{$base-size} / #{$line-height};
// 使用括号包裹之后，执行除法操作
font-size: (16px / 24px);
// 使用变量，执行除法操作
font-size: $base-size / $line-height;
// 调用函数，执行除法操作
opacity: random(4) / 5;
// 使用算术操作符，执行除法操作
padding-right: 2px / 4px + 3px;
}
Sass 中的操作符也具有优先级的概念，规则如下：
h2 {
width: 3px * 5 + 5px; // 20px
width: 3 * (5px + 5px); // 30px
width: 3px + (6px / 2) * 3; // 12px
}
相等操作符常用于条件语句，用来比较左右运算子是否相等，最终返回布尔值：
| 操作符 | 简介 |
|---|---|
== |
相等 |
!= |
不等 |
相等操作符适用于所有类型，下面来看两个示例。在第一个示例中，我们使用 == 来测试 $font 的类型，并输出对应的信息：
@mixin font-fl($font){
&:after {
@if(type-of($font) == string) {
content: 'My font is: #{$font}.';
} @else {
content: 'Sorry, the argument #{$font} is a #{type-of($font)}.';
}
}
}
h2{
@include font-fl(sans-serif);
}
编译结果：
h2:after {
content: 'My font is: sans-serif.';
}
在第二个示例中，定义了一个列表并检查该列表的长度。通过使用 % 操作符，我们可以计算每个元素的长度，然后根据特定条件对 color 进行赋值：
$list: "tomato", "lime", "lightblue";
@mixin fg-color($property) {
@each $item in $list {
$color-length: str-length($item);
@if( $color-length % 2 != 0 ) {
#{$property}: unquote($item);
}
}
}
h2 {
@include fg-color(color);
}
编译结果：
h2 {
color: lightblue;
}
这里需要提醒的是，Sass 不支持严格相等操作符 ===，不过从下面的示例中你会发现，Sass 解析 == 的原则就是严格相等：
// 在 javascript 中
("5" == 5) // true
("5" === 5) // false
// 在 Sass 中
("5" == 5) // false
(20px == 20) // true (Libsass 不支持)
与相等操作符类似，比较操作符用来比较数值。在 Sass 中，支持以下比较操作符：
| 操作符 | 简介 |
|---|---|
> |
大于 |
>= |
大于或者等于 |
< |
小于 |
<= |
小于或者等于 |
下面是一个简单的示例：
$padding: 50px;
h2 {
@if($padding <= 20px) {
padding: $padding;
} @else {
padding: $padding / 2;
}
}
编译结果：
h2 {
padding: 25px;
}
逻辑操作符常用于测试多个条件表达式，Sass 支持的逻辑操作符如下所示：
| 操作符 | 条件 | 简介 |
|---|---|---|
and |
x and y |
与操作 |
or |
x or y |
或操作 |
not |
not x |
取反 |
下面通过一个示例来解释逻辑操作符的用法：定义一个 map，存储按钮的状态以及对应的颜色，然后创建一个条件语句，用来测试 map 内元素的多少。如果通过条件测试，那么就给 h2 添加 background-color 属性。代码如下所示：
$list-map: (success: lightgreen, alert: tomato, info: lightblue);
@mixin button-state($btn-state) {
@if (length($list-map) > 2 or length($list-map) < 5) {
background-color: map-get($list-map, $btn-state);
}
}
.btn {
@include button-state(success);
}
编译结果：
.btn {
background-color: lightgreen;
}
如你所见，因为 map 的元素数量为 3，符合 length($list-map) > 2 – length($list-map) < 5 的条件，所以返回的结果是 true。
请注意以下两个条件的差异：
@if (length($list-map) > 2 or not (length($list-map) == 3)) {...}
// true
@if (length($list-map) > 2 and not (length($list-map) == 3)) {...}
// false
在第一节我们就讲过，+ 可以用来拼接字符串。下面是一个 + 拼接字符串的规则：
下面是一个实际示例：
@mixin string-concat {
&:after {
content: "My favorite language is " + Sass;
font: Arial + " sans-serif";
}
}
h2 {
@include string-concat;
}
编译结果：
h2:after {
content: "My favorite language is Sass";
font: Arial sans-serif;
}
此外，我们可以使用差值语法动态改变字符串，如果插值的结果为 null，那么该值不会被输出，下面是一个示例：
@mixin string-concat ($language) {
&:after {
content: "My favorite language is #{$language}";
// second way without using interpolation
//content: "My favorite language is " + $language;
}
}
h2 {
@include string-concat(Sass);
}
编译结果：
h2:after {
content: "My favorite language is Sass";
}
在上面的第二节中，我们分析了算术操作符，在 Sass 中一个有趣的事情就是，我们可以使用算术运算符操作颜色。请看一个实例：
h2 {
color: #468499 + #204479;
}
编译结果:
h2 {
color: #66c8ff;
}
那么，其中的解析原则是什么呢？首先我们需要记住，十六进制颜色值是由红绿蓝三种值组合而成，然后在执行相加时，每两个十六进制数值分组相加：46+20=66 (红色), 84+44=c8 (绿色), 和 99+79=ff (蓝色)。
下面是我们的最后一个示例，和上面示例的差别在于它使用了 rgba()：
h2 {
color: rgba(70, 132, 153, 1) + rgba(32, 68, 121, 1);
color: rgba(70, 132, 153, .9) + rgba(32, 68, 121, .7);
// 报错，透明通道的值必须一致
}
使用算术操作符处理
rgba()和hsla()时，必须让透明通道的值保持一致。
在这篇文章中，主要介绍了Sass的运算。如您所见，其他编程语言也具有类似功能。希望文本对你使用Sass有所帮助。但这一些都并非是最重要，你可以在Sassmeister上找到文章中所有的示例。
本文根据@George Martsoukos的《Sass Basics: Operators》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://www.sitepoint.com/sass-basics-operators/。
出处：http://www.w3cplus.com/preprocessor/sass-basics-operators.html