CSS的的Sass框架中常用的操作符的使用教程框架中常用的操作符的使用教程
主要介绍了CSS的Sass框架中常用的操作符的使用教程,整理了一些基本的逻辑操作符和字符串操作符等的翻译
和用法,需要的朋友可以参考下
赋值操作符赋值操作符
Sass 使用冒号( : )来定义一个变量:
CSS Code复制内容到剪贴板
1. $main-color: lightgray;
算术操作符算术操作符
算术操作符用于执行数学计算,下面是 Sass 所支持的算术操作符:
操作符操作符 简介简介
+
加
-
减
*
乘
/
除
%
取余
注意,上面的操作符只能用于单位相同的数值运算:
CSS Code复制内容到剪贴板
1. h2 {
2. font-size: 5px + 2em; // 单位不一致,编译报错
3. font-size: 5px + 2; // 7px
4. }
此外,两个单位相同的数值相乘无法生成有效的 CSS:
CSS Code复制内容到剪贴板
1. h2 {
2. font-size: 5px * 2px; // invalid CSS
3. }
如你所知,/ 操作符本身就是 CSS 简写语法的一部分,比如:
CSS Code复制内容到剪贴板
1. font: 16px / 24px Arial sans-serif;
2. background: url("http://example.com") no-repeat fixed center / cover;
但是,Sass 重载了该运算符,用于执行除法操作,下面让我们看看它是如何解析的:
CSS Code复制内容到剪贴板
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. // 使用算术操作符,执行除法操作