赋值操作符
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 中的操作符也具有优先级的概念,规则如下:
括号中的操作具有最高优先级
乘法、除法的优先级高于加法和减法
相等操作符
相等操作符常用于条件语句,用来比较左右运算子是否相等,最终返回布尔值:
操作符 | 简介 |
---|---|
== | 相等 |
!= | 不等 |
相等操作符适用于所有类型,下面来看两个示例。在第一个示例中,我们使用 == 来测试 $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复制内容到剪贴板 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() 时,必须让透明通道的值保持一致。