赋值操作符

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

CSS Code 复制内容到剪贴板 $main-color: lightgray;  

算术操作符

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

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

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

CSS Code 复制内容到剪贴板 h2 {         font-size :  5px    2em; // 单位不一致，编译报错         font-size :  5px    2; //  7px    }  

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

CSS Code 复制内容到剪贴板 h2 {         font-size :  5px  *  2px ; // invalid CSS    }  

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

CSS Code 复制内容到剪贴板 font: 16px / 24px Arial sans-serif;    background :  url ( "http://example.com" )  no-repeat   fixed   center  / cover;  

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

CSS Code 复制内容到剪贴板 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 中的操作符也具有优先级的概念，规则如下：

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

CSS Code 复制内容到剪贴板 h2 {         width :  3px  * 5    5px ; //  20px            width : 3 * ( 5px     5px ); //  30px            width :  3px    ( 6px  / 2) * 3; //  12px     }  

相等操作符

相等操作符常用于条件语句，用来比较左右运算子是否相等，最终返回布尔值：

操作符 简介
== 相等
!= 不等

相等操作符适用于所有类型，下面来看两个示例。在第一个示例中，我们使用 == 来测试 $font 的类型，并输出对应的信息：

CSS Code 复制内容到剪贴板 @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 );    }  

编译结果：

CSS Code 复制内容到剪贴板 h2:after {         content :  'My font is: sans-serif.' ;    }  

在第二个示例中，定义了一个列表并检查该列表的长度。通过使用 % 操作符，我们可以计算每个元素的长度，然后根据特定条件对 color 进行赋值：

CSS Code 复制内容到剪贴板 $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 );    }  

编译结果：

CSS Code 复制内容到剪贴板 h2 {         color : lightblue;    }    这里需要提醒的是，Sass 不支持严格相等操作符 ===，不过从下面的示例中你会发现，Sass 解析 == 的原则就是严格相等：       // 在 javascript 中    ( "5"  == 5) // true       ( "5"  === 5) // false       // 在 Sass 中    ( "5"  == 5) // false       ( 20px  == 20) // true (Libsass 不支持)  

比较操作符

与相等操作符类似，比较操作符用来比较数值。在 Sass 中，支持以下比较操作符：

操作符 简介
> 大于
>= 大于或者等于
< 小于
<= 小于或者等于

下面是一个简单的示例：

CSS Code 复制内容到剪贴板 $padding: 50px;       h2 {        @if($ padding  <=  20px ) {             padding : $ padding ;        } @else {             padding : $ padding  / 2;        }    }  

编译结果：

CSS Code 复制内容到剪贴板 h2 {         padding :  25px ;    }  

逻辑操作符

逻辑操作符常用于测试多个条件表达式，Sass 支持的逻辑操作符如下所示：

操作符 条件 简介
and x and y 与操作
or x or y 或操作
not not x 取反

下面通过一个示例来解释逻辑操作符的用法：定义一个 map，存储按钮的状态以及对应的颜色，然后创建一个条件语句，用来测试 map 内元素的多少。如果通过条件测试，那么就给 h2 添加 background-color 属性。代码如下所示：

CSS Code 复制内容到剪贴板 $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);    }  

编译结果：

CSS Code 复制内容到剪贴板 .btn {         background-color : lightgreen;    }  

如你所见，因为 map 的元素数量为 3，符合 length($list-map) > 2 – length($list-map) < 5 的条件，所以返回的结果是 true。

请注意以下两个条件的差异：

CSS Code 复制内容到剪贴板 @if (length($list-map) > 2 or not (length($list-map) == 3)) {...}     // true       @if (length($list-map) > 2 and not (length($list-map) == 3)) {...}     // false  

字符串操作符

在第一节我们就讲过， 可以用来拼接字符串。下面是一个 拼接字符串的规则：

如果字符串被引号包裹，那么它拼接任何字符串的结果也会被引号包裹
如果字符串没有被引号包裹，那么它拼接任何字符串的结果也不会被引号包裹
下面是一个实际示例：

CSS Code 复制内容到剪贴板 @mixin string-concat {        &:after {             content :  "My favorite language is "    Sass;             font :  Arial     " sans-serif" ;        }    }       h2 {        @include string-concat;    }  

编译结果：

CSS Code 复制内容到剪贴板 h2:after {         content :  "My favorite language is Sass" ;         font :  Arial   sans-serif ;    }  

此外，我们可以使用差值语法动态改变字符串，如果插值的结果为 null，那么该值不会被输出，下面是一个示例：

CSS Code 复制内容到剪贴板 @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);    }  

编译结果：

CSS Code 复制内容到剪贴板 h2:after {         content :  "My favorite language is Sass" ;    }  

颜色运算

在上面的第二节中，我们分析了算术操作符，在 Sass 中一个有趣的事情就是，我们可以使用算术运算符操作颜色。请看一个实例：

CSS Code 复制内容到剪贴板 h2 {         color :  #468499     #204479 ;    }  

编译结果:

CSS Code 复制内容到剪贴板 h2 {         color :  #66c8ff ;    }  

那么，其中的解析原则是什么呢？首先我们需要记住，十六进制颜色值是由红绿蓝三种值组合而成，然后在执行相加时，每两个十六进制数值分组相加：46 20=66 (红色), 84 44=c8 (绿色), 和 99 79=ff (蓝色)。

下面是我们的最后一个示例，和上面示例的差别在于它使用了 rgba()：

CSS Code 复制内容到剪贴板 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() 时，必须让透明通道的值保持一致。