在 css 中能做运算的，到目前为止仅有 calc() 函数可行。在 sass 中，运算只是其基本特性之一。在 sass 中可以做各种数学计算。
加法运算是 sass 中运算中的一种，在变量或属性中都可以做加法运算。如：
1 .box {2 width: 20px + 8in;3 }
编译出来的 css:
1 .box {2 width: 788px;3 }
对于携带不同类型的单位时，在 sass 中计算会报错，如下例所示：
1 .box {2 width: 20px + 1em;3 }
编译的时候，编译器会报错：“incompatible units: 'em' and ‘px'.”
减法
sass的减法运算和加法运算类似
1 $full-width: 960px;2 $sidebar-width: 200px;3 .content {4 width: $full-width - $sidebar-width;5 }
编译出来的 css 如下：
1 .content {2 width: 760px;3 }
同样的，运算时碰到不同类型的单位时，编译也会报错
乘法
sass 中的乘法运算和前面介绍的加法与减法运算还略有不同。虽然他也能够支持多种单位（比如 em ,px , %），但当一个单位同时声明两个值时会有问题。
1 .box {2 width:10px * 2px; 3 }
编译的时候报“20px*px isn't a valid css value.”错误信息。
如果进行乘法运算时，两个值单位相同时，只需要为一个数值提供单位即可。上面的示例可以修改成：
1 .box {2 width: 10px * 2;3 }
编译出来的 css:
1 .box {2 width: 20px;3 }
sass 的乘法运算和加法、减法运算一样，在运算中有不同类型的单位时，也将会报错。如下面的示例：
1 .box {2 width: 20px * 2em;3 }
编译时报“40em*px isn't a valid css value.”错误信息。
除法
sass 的乘法运算规则也适用于除法运算。不过除法运算还有一个特殊之处。众所周知“/”符号在 css 中已做为一种符号使用。因此在 sass 中做除法运算时，直接使用“/”符号做为除号时，将不会生效，编译时既得不到我们需要的效果，也不会报错。一起先来看一个简单的示例：
1 .box {2 width: 100px / 2; 3 }
编译出来的 css 如下：
1 .box {2 width: 100px / 2;3 }
要修正这个问题，只需要给运算的外面添加一个小括号( )即可：
1 .box {2 width: (100px / 2); 3 }
编译出来的 css 如下：
1 .box {2 width: 50px;3 }
除了上面情况带有小括号，“/”符号会当作除法运算符之外，如果“/”符号在已有的数学表达式中时，也会被认作除法符号。如下面示例：
1 .box {2 width: 100px / 2 + 2in; 3 }
编译出来的css：
1 .box {2 width: 242px;3 }
当用变量进行除法运算时，“/”符号也会自动被识别成除法，如下例所示：
1 $width: 1000px;2 $nums: 10;3 .item {4 width: $width / 10; 5 }6 .list {7 width: $width / $nums;8 }
编译出来的css:
1 .item {2 width: 100px;3 }4 .list {5 width: 100px;6 }
”/ ”符号被当作除法运算符时有以下几种情况：
• 如果数值或它的任意部分是存储在一个变量中或是函数的返回值。
• 如果数值被圆括号包围。
• 如果数值是另一个数学表达式的一部分。
1 //scss2 p {3 font: 10px/8px; // 纯 css，不是除法运算4 $width: 1000px;5 width: $width/2; // 使用了变量，是除法运算6 width: round(1.5)/2; // 使用了函数，是除法运算7 height: (500px/2); // 使用了圆括号，是除法运算8 margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算9 }
编译出来的css：
1 p {2 font: 10px/8px;3 width: 500px;4 height: 250px;5 margin-left: 9px;6 }
sass 的除法运算还有一个情况。在乘法运算时，如果两个值带有相同单位时，做乘法运算时，出来的结果并不是我们需要的结果。但在除法运算时，如果两个值带有相同的单位值时，除法运算之后会得到一个不带单位的数值。如下所示：
1 .box {2 width: (1000px / 100px);3 }
编译出来的css如下：
1 .box {2 width: 10;3 }
变量计算
在 sass 中除了可以使用数值进行运算之外，还可以使用变量进行计算。
1 $content-width: 720px;2 $sidebar-width: 220px;3 $gutter: 20px;4 .container {5 width: $content-width + $sidebar-width + $gutter;6 margin: 0 auto;7 }
编译出来的css
1 .container {2 width: 960px;3 margin: 0 auto;4 }
数字运算
在 sass 运算中数字运算是较为常见的，数字运算包括前面介绍的：加法、减法、乘法和除法等运算。而且还可以通过括号来修改他们的运算先后顺序。和我们数学运算是一样的，
示例：
1 .box {2 width: ((220px + 720px) - 11 * 20 ) / 12 ; 3 }
编译出来的 css:
1 .box {2 width: 60px;3 }
颜色运算
所有算数运算都支持颜色值，并且是分段运算的。也就是说，红、绿和蓝各颜色分段单独进行运算。如：
1 p {2 color: #010203 + #040506;3 }
计算公式为 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09， 并且被合成为：
如此编译出来的 css 为：
1 p {2 color: #050709;3 }
算数运算也能将数字和颜色值 一起运算，同样也是分段运算的。如：
1 p {2 color: #010203 * 2;3 }
计算公式为 01 * 2 = 02、02 * 2 = 04 和 03 * 2 = 06， 并且被合成为：
1 p {2 color: #020406;3 }
字符运算
1 $content: hello + + sass!;2 .box:before {3 content: #{$content} ;4 }
编译出来的css：
1 .box:before {2 content: hello sass! ;3 }
除了在变量中做字符连接运算之外，还可以直接通过 +，把字符连接在一起：
1 div {2 cursor: e + -resize;3 }
注意，如果有引号的字符串被添加了一个没有引号的字符串 （也就是，带引号的字符串在 + 符号左侧）， 结果会是一个有引号的字符串。 同样的，如果一个没有引号的字符串被添加了一个有引号的字符串 （没有引号的字符串在 + 符号左侧）， 结果将是一个没有引号的字符串。 例如：
1 p:before {2 content: foo + bar;3 font-family: sans- + serif;4 }
编译出来的 css：
1 p:before {2 content: foo bar;3 font-family: sans-serif; 4 }