CSS的Sass框架中常用的操作符的使用教程

赋值操作符

Sass 使用冒号（ : ）来定义一个变量：

1. $main-color: lightgray;  

算术操作符

算术操作符用于执行数学计算，下面是 Sass 所支持的算术操作符：

操作符	简介
+	加
-	减
*	乘
/	除
%	取余

注意，上面的操作符只能用于单位相同的数值运算：

1. h2 {   
2.     font-size: 5px + 2em; // 单位不一致，编译报错   
3.     font-size: 5px + 2; // 7px  
4. }  

此外，两个单位相同的数值相乘无法生成有效的 CSS：

1. h2 {   
2.     font-size: 5px * 2px; // invalid CSS   
3. }  

如你所知，/ 操作符本身就是 CSS 简写语法的一部分，比如：

1. font: 16px / 24px Arial sans-serif;   
2. background: url("http://example.com") no-repeat fixed center / cover;  

但是，Sass 重载了该运算符，用于执行除法操作，下面让我们看看它是如何解析的：

1. h2 {   
2.     // 不执行除法操作，原样输出   
3.     font-size: 16px / 24px;    
4.   
5.     // 使用插值语法之后，原样输出   
6.     font-size: #{$base-size} / #{$line-height};    
7.   
8.     // 使用括号包裹之后，执行除法操作   
9.     font-size: (16px / 24px);    
10.   
11.     // 使用变量，执行除法操作   
12.     font-size: $base-size / $line-height;    
13.   
14.     // 调用函数，执行除法操作   
15.     opacity: random(4) / 5;    
16.   
17.     // 使用算术操作符，执行除法操作   
18.     padding-right: 2px / 4px + 3px;    
19. }  

Sass 中的操作符也具有优先级的概念，规则如下：

括号中的操作具有最高优先级
乘法、除法的优先级高于加法和减法

1. h2 {   
2.     width: 3px * 5 + 5px; // 20px  
3.   
4.     width: 3 * (5px + 5px); // 30px  
5.   
6.     width: 3px + (6px / 2) * 3; //&n