Sass学习之路(11)——Sass运算

程序中的运算是非常唱见的一件事情，而运算也是Sass中的一项基本属性，在Sass中可以进行各种数学计算。

1.加法

在变量和属性中，都可以做加法运算。看一个例子：

.box {
  width: 20px + 8in;
}

编译出的CSS:

.box {
  width: 788px;
}

这里 解释一下in这个单位，in是指英寸，1英寸等于96px，所以最后编译的结果是20px+8*96px=778px。

tips:in  mm  cm  pt  pc  px这样的绝对单位都能进行运算，计算时会换算成px，如果是无法换算的单位，就会报错。

 但是ex  em  rem这样的相对单位都不能进行计算，否则会报错。

2.减法

减法和加法是非常类似的，我们来看一个例子：

$full-width: 960px;
$sidebar-width: 200px;

.content {
  width: $full-width -  $sidebar-width;
}

编译出的CSS：

.content {
  width: 760px;
}

减法中的注意事项与加法也基本相同。

3.乘法

乘法运算和加减法略有不同，虽然他可以支持多种单位，如px,em,%等，但相乘的两个值不能都带有单位，否则会报错。例如：

.box {
  width:10px * 2px;  
}

编译时会报出错误，正确的写法如下：

.box {
  width: 10px * 2;
}

这时会编译出：

.box {
  width: 20px;
}

4.除法

Sass的乘法运算规则也适用于除法，但也有些许不同。Sass中除法运算符"/"直接使用，很多情况下不会被当作运算符，而直接显示出来，没有任何效果也不报错。例如：

.box {
  width: 100px / 2;  
}

编译后如下：

.box {
  width: 100px / 2;
}

这样的结果显然没有任何意义。要修正这个问题，值需要在外边套一个小括号即可：

.box {
  width: (100px / 2);  
}

编译后：

.box {
  width: 50px;
}

这样就成功的做出的除法运算，除了添加括号外，如果"/"符号出现在地方已经有了其他的数学表达式，也会被当作除号运算，例如：

.box {
  width: 100px / 2 + 2in;  
}

这时不加括号也可以成功运算出结果：

.box {
  width: 242px;
}

还有最后一种情况，就是除数或者被除数有任意一方是变量，那么"/"也会被当作除号运算，例如：

$width: 1000px;
$nums: 10;

.item {
  width: $width / 10;  
}

.list {
  width: $width / $nums;
}

结果如下：

.item {
  width: 100px;
}

.list {
  width: 100px;
}

5.颜色运算

Sass中的所有算数运算方式都支持颜色值，而且是依据红绿蓝三元色的值进行分段计算的，例如：

p {
  color: #010203 + #040506;
}

计算 出的三原色的值分别是01+04=05，02+05=07，03+06=09，最后编译的结果是:

p {
  color: #050709;
}

类似的，乘法运算同样也是分段式的：

p {
  color: #010203 * 2;
}

编译后：

p {
  color: #020406;
}

6.字符运算

Sass中的字符运算是通过"+"来对字符串进行连接，和JS中的字符串拼接非常相似。例如：

$content: "Hello" + "" + "Sass!";
.box:before {
  content: " #{$content} ";
}

编译后：

.box:before {
  content: " Hello Sass! ";
}

在Sass中无论是有引号字符串还是无引号字符串，都可以用这种方式进行连接。但是有一个规则：

（1）两个有引号字符串连接，结果是有引号的字符串。两个无引号字符串连接，结果是无引号字符串。

（2）有引号字符串和无引号字符串连接，结果取决于加号前边的字符串。前边的是有引号字符串，结果就是有引号字符串，反过来就是无引号字符串。例如：

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}

编译结果如下：

p:before {
  content: "Foo Bar";
  font-family: sans-serif; }

那么，关于Sass的运算就到这里啦~