Sass运算

Sass支持数字的加（+）、减（-）、乘（）、除（/）和取余（%）等运算，如果必要时会在不同单位间进行值的转换。示例代码如下。

p {
 width: 1in + 8pt;
}

上述代码编译后的结果如下。

p {
 width: 1.111in; 
}

上述代码中，将8pt转换为lin后的值为1.111in。其中，pt全称为point，是一个自然界的长度单位，1in = 72pt。

在学习了不同单位间转换值之后，下面以“/”运算符号为例讲解Sass元素的内容。

“/”符号在CSS中通常起到分隔数字的用途，而在Sass中同时也赋予了“/”除法运算的功能，但两者并不会冲突。也就是说，如果“/”在Sass中把两个数字分隔，编译后的CSS文件中也是同样的作用。

下面通过代码演示“/”符号的使用方式。

p {
 font: 10px/8px;
 $width: 1000px;
 width: $width/2;
 height: (500px/2); 
 margin-left: 5px + 8px/2px; 
}

上述代码编译后的结果如下。

p {
 font: 10px/8px;
 width: 500px;
 height: 250px;
 margin-left: 9px; 
}

上述代码中，font编译后的结果不变，这是因为没有被圆括号包裹；width编译后的结果为500px，这是$width变量除以2计算后的结果，因为$width变量的值提前定义为1000px；height编译后的结果为250px，这是被圆括号包裹的500px/2计算后的结果；margin-left编译后的结果为9px；这是因为“8px/2px”作为了算数表达式的一部分，并且计算后结果为4px，然后，再通过“+”符号与前一个值进行加法运算，所以最终得到的结果为9px。

如果需要使用变量，同时又要确保“/”不做除法运算而是完整地编译到CSS文件中，只需要用#{}插值语句将变量包裹。示例代码如下。

p {
 $font-size: 12px;
 $line-height: 30px;
 font: #{$font-size}/#{$line-height};
}

上述代码编译后的结果如下。

p {
 font: 12px/30px;
 }

除了数字运算之外，关系运算符<、>、<=、>=也可以用于数字的运算，所有数据类型均支持相等（==）或不等（!=）运算。此外，每种数据类型也有其各自支持的运算方式。关于更多运算符号的使用，读者可以参考Sass官网进行学习。