加法

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

    }

}

9

10

编译出来的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;

}

项目设计组  供稿