SCSS语法中的加减乘除

/*加法*/
$sidebar-width: 220px;
$content-width: 720px;
$gap-width: 1in;

.container {
    width: $sidebar-width+$content-width+$gap-width;
    margin: 0 auto;
}
/*减法*/
$container: 960px;
$sidebar-width: 220px;
$gap-width: 20px;

.content{
    width: $container + $sidebar-width - $gap-width;
    float: left;
}
/*乘法*/
.box {
  width: 10px * 2;
}

$list: twitter,facebook,github,weibo;

@for $i from 1 through length($list){
  .icon-#{nth($list,$i)}{
    background-postion: 0 -2 * $i;
  }
}

/*除法-需要给运算的外面添加一个小括号( )*/
.box {
  width: 100px/2 + 2in;  
}
.box {
  width: (100px/2);  
}
.box {
  width: 100px/2;  
}

/*变量计算*/
$content-width: 720px;
$sidebar-width: 220px;
$gutter: 20px;

.container {
  width: $content-width + $sidebar-width + $gutter;
  margin: 0 auto;
}

Koala编译之后的结果如下：

/*加法*/
.container {
  width: 1036px;
  margin: 0 auto;
}

/*减法*/
.content {
  width: 1160px;
  float: left;
}

/*乘法*/
.box {
  width: 20px;
}

.icon-twitter {
  background-postion: 0 -2;
}

.icon-facebook {
  background-postion: 0 -4;
}

.icon-github {
  background-postion: 0 -6;
}

.icon-weibo {
  background-postion: 0 -8;
}

/*除法-需要给运算的外面添加一个小括号( )*/
.box {
  width: 242px;
}

.box {
  width: 50px;
}

.box {
  width: 100px/2;
}

/*变量计算*/
.container {
  width: 960px;
  margin: 0 auto;
}