10天精通Sass 之 Sass运算

CSS中目前只有calc()能做运算，但是在Sass中，可以做各种数学运算。

加法

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

编译出来的CSS:

.box {  width: 788px;}

1in = 96px;

当em,rem等相对当前字体，于px在一起不能运算，会报错，如:

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

不过如果其中一个不同单位，那么会以另一个带单位的为准，如：

.box{    width: 20px + 8;}.box2{    width: 20em + 8;}

编译出来的CSS为:

.box {  width: 28px;}.box2 {  width: 28em;}

减法

$container: 960px;$sidebar-width: 220px;$gap-width: 20px;.content{    width: $container - $sidebar-width - $gap-width;    float: left;}

编译出来的CSS：

.content {  width: 720px;  float: left; }

减法和加法一样，不支持em,rem等相对当前字体大小的单位与px进行计算。

乘法

乘法运算时，只需要其中一个带单位即可，如果都带有单位会报错,
如:

.box{    width: 20px * 20px}

编译时会报错。

而:

.box{    width: 20px * 20;}

编译出来的CSS：

.box{    width: 400px;}

与加减法一样，不同类型的单位运算时会报错。

除法

Sass的乘法运算规则也适用于除法运算，不过除法运算有特殊之处，因为”/”符号在CSS中已经作为一种符号使用，因此在Sass中直接使用”/”作为处好时，将不会生效，编译时既不会报错，也不会得到我们想要的效果。

如:

.box{    width: 100px / 2;}

编译出来的CSS:

.box {  width: 100px / 2;}

要修正这个文字，只需要给运算的外面添加一对小括号即可。

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

编译出来的CSS为:

.box {  width: 50px;}

除了小括号以外，如果除了 “/” 外，还有其它的运算符号，那么也会被当作除号看待。

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

编译出来的CSS为：

.box {    width: 70px;}

另外，如果是用变量进行除法运算，”/”也会自动被识别为除法。

如:

$width: 960px;.col {   width: $width / 10;}

编译出来的CSS为:

.col {  width: 96px; }

综合上述，”/ ”符号被当作除法运算符时有以下几种情况：

• 如果数值或它的任意部分是存储在一个变量中或是函数的返回值。
• 如果数值被圆括号包围。
• 如果数值是另一个数学表达式的一部分。

在除法运算时，如果两个值带有相同的单位值时，除法运算之后会得到一个不带单位的数值。

关于单位计算的问题，同物理倒是非常像。

如果不想记”/”的规则，那么在想作为除法使用是，加上一个括号即可。

颜色运算

所有的运算都支持颜色值。
如:

p {  color: #010203 + #040506;}

编译出的CSS为:

p {  color: #050709;}

同样颜色值也支持乘法运算:

p {  color: #010203 * 2;}

编译出来的CSS:

p {  color: #020406;}

运算规则和二进制乘法相同，依次与每一位相乘。个人觉得颜色值的运算意义不是很大。

字符运算

在Sass中可以用”+”号对字符串进行拼接，如:

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

编译出来的CSS为:

.box:after {  content: "HelloSass!"; }.box:before {  content: " HelloSass! "; }

除了在变量中做字符连接运算之外，还可以直接通过 +，把字符连接在一起：

div{    cursor: e + -resize;}span{    cursor: "e" + "-resize";}

编译出来的CSS为:

div {  cursor: e-resize;}span {  cursor: "e-resize"; }

==注意==:如果有引号的字符串被添加了一个没有引号的字符串 （也就是，带引号的字符串在 + 符号左侧）， 结果会是一个有引号的字符串。 同样的，如果一个没有引号的字符串被添加了一个有引号的字符串 （没有引号的字符串在 + 符号左侧）， 结果将是一个没有引号的字符串。 也就是说始终与加号左边的保持一致:

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

编译出来的CSS为:

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