【1】[Sass]的插值
什么是插值:
插值 (interpolation) - 将一个占位符,替换成一个值。通常是指变量插值,或者变量替换。这不是Sass独有的。实际上,你可以在很多编程语言中,发现这种特性。
Sass中变量替换:
在Sass中使用#{ }进行表达式替换的
$description: "awesome";
@warn "Tuts+ is #{$description}!";
注意:Sass的变量命名与PHP的变量命名都是以$ 为前缀,但在进行插值的时候,Sass变量中的$ 不能像PHP一样丢掉。变量被#{}包裹了起来。另外可以插入任何类型的变量,不仅仅是字符串。
$description: 33;
@warn "Tuts+ is #{$description}!";
Sass的插值是很复杂的,这里只是简单的让你大概知道什么是Sass插值,但Sass插值的使用与其是如何工作需要你自行了解。
【2】[Sass]数据类型
Sass的数据类型:
1、数字:1、5px;
2、颜色:blue、rgba(0,0,0,0)、#123456;
3、空值:null;
4、字符串:有引号或者没引号的字符串;
5、布尔值:true、false;
6、值列表:用空格或者逗号分开
这里主要介绍字符串与值列表,因为其他的和js的使用差不多。
字符串:
在编译 CSS 文件时不会改变其类型。只有一种情况例外,使用 #{ }插值语句时,有引号字符串将被编译为无引号字符串,这样方便了在混合指令 (mixin) 中引用选择器名。
//sass代码
@mixin firefox-message($selector) {
body.firefox #{$selector}:before {
content: "Hi, Firefox users!";
}
}
@include firefox-message(".header");
//编译后得到的css代码
//在sass代码中的".header"在编译后得到的css文件中是 .header
body.firefox .header:before {
content: "Hi, Firefox users!"; }
值列表:
值列表 (lists) 是指 Sass 处理 CSS 中通过空格或者逗号分隔的一系列的值。例如
margin: 10px 15px 0 0
如果只有一个值,则视为只包含一个值的值列表。值列表中可以包含值列表。
注释:可以用 () 表示空的列表,这样不可以直接编译成 CSS,比如编译 font-family: ()时,Sass 将会报错。如果值列表中包含空的值列表或空值,编译时将清除空值,比如 1px 2px () 3px 或 1px 2px null 3px。
【3】[Sass]运算
1、加法和减法可以在变量或属性中使用,em、rem相对于当前字体大小时不能和px进行运算,还有百分号%也不行,否则会报错。但px与in则可以进行运算,因为两者可以进行换算。若一个带单位一个不带单位则以带单位的为准。
.box {
width: 20px + 80px;
}
注释: 使用减法时,减号左边一定要空格隔开,不然会和前面的内容进行拼接,建议不管是哪种运算,在运算符的两边都预留空格,这样即规范看着也舒服。
2、乘法,支持多种单位(比如 em ,px , %)
乘法运算时,两个值单位相同时,只需要为一个数值提供单位即可,否则会报错。在运算中有不同类型的单位时,也将会报错。
//10px*2px会报错
.box {
width:10px * 2px;
}
//10px * 2em也会报错
.box {
width:10px * 2em;
}
//改成下列代码就没有问题
.box {
width:10px * 2;
}
3、除法,在 Sass 中做除法运算时,直接使用“/”符号做为除号,将不会生效,编译时既得不到我们需要的效果,也不会报错。正确的使用方法应该是给运算的外面添加一个小括号( )。
.box {
width: (100px / 2);
}
如果“/”符号在已有的数学表达式中与当用变量进行除法运算时,也会被认作除法符号。
.box {
width: 100px / 2 + 2in;
}
$width: 1000px;
$nums: 10;
.item {
width: $width / 10;
}
注释:加、减、乘、除都必须是同一单位下运算,不然会报错,变量也可以进行加减乘除,这些运算可以使用括号还改变运算的先后顺序。
【4】颜色运算,所有算数运算都支持颜色运算,它所采用的是分段运算。
注释:分段运算,例如:#010203 * 2,运算过程则为 01 * 2 = 02、02 * 2 = 04 和 03 * 2 = 06,最终合并#020406。
//sass代码
.span {
color: #123456 + #111111;
}
.span2 {
color: #111111 * 2;
}
.cf3 {
background: red + blue;
}
.cf4{
background: #ff0000 + #ffff00; // 最高只能加到ff
}
//编译后的css代码
```javascript
.span {
color: #234567;
}
.span2 {
color: #222222;
}
.cf3 {
background: magenta; //洋红色
}
.cf4 {
background: yellow; //黄色
}
【5】字符运算,sass中使用加号+进行字符拼接,可在变量中使用也可直接连接字符
//sass代码
$content: "Hello" + " " + "World !";
.box1:before {
content: $content;
}
.box2{
cursor: col + -resize;
}
.box3{
font-size: "12" + "px";
}
//编译后的CSS代码
.box1:before {
content: "Hello World !";
}
.box2 {
cursor: col-resize;
}
.box3 {
font-size: "12px";
}
注释:如果有引号的字符串被添加了一个没有引号的字符串 (也就是,带引号的字符串在 + 符号左侧), 结果会是一个有引号的字符串。 同样的,如果一个没有引号的字符串被添加了一个有引号的字符串 (没有引号的字符串在 + 符号左侧), 结果将是一个没有引号的字符串。
这是看慕课课程学习的笔记,如果觉得不清楚的可以直接看慕课上的视频https://www.imooc.com/learn/311