Sass的基本运算(转载)

转载于：http://www.cnblogs.com/Medeor/p/4966952.html

Sass中的基本运算

一、加法

　　在 CSS 中能做运算的，到目前为止仅有 calc() 函数可行。但在 Sass 中，运算只是其基本特性之一。
      sass做加法运算是可以不考虑参数带单位，但需要单位同一
      加号可以不需要空格隔开

　　示例:

1 $sidebar-width: 220px;
2 $content-width: 720px;
3 $gap-width: 20px;
4
5 .container {
6     width: $sidebar-width+$content-width + $gap-width;
7     margin: 0 auto;
8 }

　　输出:

1 .container {
2   width: 960px;
3   margin: 0 auto; }

+ 还可以做字符链接
     注意，如果有引号的字符串被添加了一个没有引号的字符串 （也就是，带引号的字符串在 + 符号左侧）， 结果会是一个有引号的字符串。 同样的，如果一个没有引号的字符串被添加了一个有引号的字符串 （没有引号的字符串在 + 符号左侧）， 结果将是一个没有引号的字符串。 例如：

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

　　输出:

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

二、减法 - 需要注意空格了

　　示例:

1 $full-width: 960px;
2 $sidebar-width: 200px;
3
4 .content {
5     width: $full-width - $sidebar-width;
6 }

　　输出:

1 .content {
2   width: 760px; }

三、乘法

　　能够支持多种单位（比如 em ,px , %）；

　　如果进行乘法运算时，两个值单位相同时，只需要为一个数值提供单位即可(多个乘数中只需要一个乘数提供单位，否则报错)。
　　示例:

1 .box {
2     width: 10px * 2;
3 }

　　输出:

1 .box {
2   width: 20px; }

四、除法

　　众所周知“/”符号在 CSS 中已做为一种符号使用。因此在 Sass 中做除法运算时，直接使用“/”符号做为除号时，将不会生效，编译时既得不到我们需要的效果，也不会报错。
      需要给运算的外面添加一个小括号()才能执行除法运算

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

　　总结: ”/  ”符号被当作除法运算符时有以下几种情况：
   　　 如果数值或它的任意部分是存储在一个变量中或是函数的返回值。
    　　如果数值被圆括号包围。
    　　如果数值是另一个数学表达式的一部分。
    　　示例：

1 p {
2      font: 10px/8px;             // 纯 CSS，不是除法运算
3      $width: 1000px;
4      width: $width/2;            // 使用了变量，是除法运算
5      width: round(1.5)/2;        // 使用了函数，是除法运算
6      height: (500px/2);          // 使用了圆括号，是除法运算
7      margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算
8 }

　　输出:

1 p {
2   font: 10px/8px;
3   width: 500px;
4   width: 1;
5   height: 250px;
6   margin-left: 9px; }

　　Sass 的除法运算还有一个情况。先回忆一下，在乘法运算时，如果两个值带有相同单位时，做乘法运算时，出来的结果并不是我们需要的结果。但在除法运算时，如果两个值带有相同的单位值时，除法运算之后会得到一个不带单位的数值。　　示例:

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

　　输出:

1 .box {
2   width: 10; }

　　练习:

.box {
    width: ((220px + 720px) - 11 * 20) / 12;
}
/*输出:*/
.box {
  width: 60px; }

五、颜色运算 - 分段运算

　　所有算数运算都支持颜色值，并且是分段运算的。也就是说，红、绿和蓝各颜色分段单独进行运算。如：

1 p {
2           color: #010203 + #040506;
3     }

计算公式为 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09， 并且被合一起

　　示例:

1 p {
2      padding: 0px; color: rgb(0, 128, 0); line-height: 1.5 !important;">#012345 + #543210;
3     color:#123456 * 2;
4 }

　　输出:

1 p {
2   background-color: #555555;
3   color: #2468ac; }