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;
}