Sass基本特性--运算（加法、减法、乘法、除法、变量运算、数字运算、颜色运算、字符运算）

一、加法和减法可以在变量或属性中使用，em、rem相对于当前字体大小时不能和px进行运算，还有百分号%也不行，若一个带单位一个不带单位则以带单位的为准

$content: 720px;
$header : 220px;
$search: 20px;
.container {
    width: $content + $header - $search;
}
.box{
   width: 50px + 100;
}

编译后

.container {
  width: 920px;
}

.box {
  width: 150px;
}

注意项： 使用减法时，减号左边一定要空格隔开，不然会和前面的内容进行拼接，建议不管是哪种运算，在运算符的两边都预留空格，这样即规范看着也舒服。

二、乘法，支持多种单位（比如 em ,px , %）

.month{
  height: 50 * 2px;
}
$list: year,month,day,hour;
@for $i from 1 through length($list){
  .time-#{nth($list,$i)}{
    background-postion: 0 -10px * $i;
  }
}

编译后

.month {
  height: 100px;
}

.time-year {
  background-postion: 0 -10px;
}

.time-month {
  background-postion: 0 -20px;
}

.time-day {
  background-postion: 0 -30px;
}

.time-hour {
  background-postion: 0 -40px;
}

乘法运算时，只需给一个计算项带上单位即可，若每一项都带单位则会报错。

三、除法,"/"在css中已经作为了符号使用，这种情况下必须加上小括号()才行，不然不报错也不进行运算，而是原样输出

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

编译后

.box {
  width: 100px / 2;
}

.box1 {
  width: 50px;
}

除了使用()外，"/"在已有的表达式中也会被直接当做除号使用，另外在变量中进行除法运算时"/"会自动识别成除法不用加小括号()

$header : 20px;
$search: 20px;
$width: 360px;
.samu{
  width: $header + $width / $search;
}
.qwe {
   width: $width /10;
}

编译后

.samu {
  width: 38px;
}

.qwe {
  width: 36px;
}

乘法中运算项都带单位时会报错，但除法不会，它会进行计算，计算的结果将不会带单位

.dell{
  width: (1000px / 10px);
}

编译后

.dell {
  width: 100;
}

除法还可以使用函数

.sup{
  width: round(2.3) / 1;
}

编译后

.sup {
  width: 2;
}

加、减、乘、除都必须是同一单位下运算，不然会报错。

Sass基本算法：
加法：对于不同类型的单位，计算会报错；
减法：对于不同类型的单位，计算会报错；
乘法：对于不同类型的单位，计算会报错；多个值单位相同时，只需要为一个值提供单位即可。
除法：  
1.   如果数值或它的任意部分是存储在一个变量中或是函数的返回值。
2.   如果数值被小括号包围。
3.   如果数值是数学表达式的一部分。

也可以进行混合运算

.box {
  width: ((200px + 220px) - 10* 20 ) / 10 ;  
}

编译后

.box {
  width: 22px;
}

四、颜色运算，所有算数运算都支持颜色运算，它所采用的是分段运算

.span {
  color: #010203 + #040506;
}
.span2 {
  color: #010203 * 2;
}
.cf3 {
  background: red + blue;
}
.cf4{
  background: #ff0000 + #ffff00; // 最高只能加到ff
}

编译后

.span {
  color: #050709;
}
.span2 {
  color: #020406;
}
.cf3 {
  background: magenta; //洋红色
}
.cf4 {
  background: yellow; //黄色
}

五、字符运算，sass中使用加号+进行字符拼接，可在变量中使用也可直接连接字符

$content: "Hello" + " " + "World !";
.box:before {
  content: $content;
}
.box2{
  cursor: col  + -resize;
}
.box3{
  font-size: "12" + "px";
}

编译后

.box:before {
  content: "Hello World !";
}
.box2 {
  cursor: col-resize;
}
.box3 {
  font-size: "12px";
}

连接有引号”“的字符串时，跟着+走（+左边有引号则结果有引号，+左边没引号则结果没引号）

.box4{
  font-family: "sans-" + serif;
}
.box5{
  font-family: sans- + "serif";
}

编译后

.box4 {
  font-family: "sans-serif";
}
.box5 {
  font-family: sans-serif;
}