CSS预处理器——sass（下篇：sass的运算）

【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