7. 运算

Sass支持多种数据类型的变量，比如：

• 数字，1, 2, 13, 10px
• 字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
• 颜色，blue, #04a3f9, rgba(255,0,0,0.5)
• 布尔型，true, false
• 空值，null

所有数据类型均支持相等运算 == 或 !=，此外，每种数据类型也有其各自支持的运算方式。

7.1 数值运算

Sass支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。

//sass style//-------------------------------.box {  height: 17px + 20px; // => 37px         数字加法运算
  width: (75rem/16);   // => 4.6875rem    除法运算
  color: #303030*2;  // => #606060;     乘法运算（颜色运算）
  padding: 20px - 3;   // => 17pex        数字减法
  font-family: sans- + "serif"; // => sans-serif 字符串加法
  width: 1em + (2em * 3); // 带括号的运算}//css style//-------------------------------   .box {  height: 37px;  width: 4.6875rem;  color: #606060;  padding: 17px;  font-family: sans-serif;  width: 7em;
}

8. Sass语句

Sass提供了常用的循环、判断分支语句的相关指令，可以让我们按照编程语言一样编写Sass代码。

8.1 if语句

当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码。

//sass style//------------------------------- $w: 960px;$type: monster;.box {
  @if 2*3 > 5 {  // 简单if判断语句
    color: red;
  }
  @if $w > 900px {    width: $w;
  } @else {     // if  else 语句
    width: 900px;
  }

  @if $type == ocean {  // 多个if和else语句
    color: blue;
  } @else if $type == matador {    color: red;
  } @else if $type == monster {    color: green;
  } @else {    color: black;
  }
}//css style//------------------------------- .box {  color: red;  width: 960px;  color: green;
}

@if 声明后面可以跟多个 @else if 声明，或者一个 @else 声明。
如果 @if 声明失败，Sass 将逐条执行 @else if 声明，如果全部失败，最后执行 @else 声明

8.2 for循环语句

@for 指令可以在限制的范围内重复输出格式。类似for循环。
两种格式：

• @for $var from <start> through <end> :条件范围包含 <start> 与 <end> 的值
• @for $var from <start> to <end>: 围只包含 <start> 的值不包含 <end> 的值

//scss style//------------for througth循环------------------- @for $i from 1 through 3 {  .item-#{$i} { width: 2em * $i; }
}//css style//------------------------------- .item-1 {  width: 2em; }.item-2 {  width: 4em; }.item-3 {  width: 6em; }

//scss style//------------for  to 循环------------------- @for $i from 1 to 3 {  .item-#{$i} { width: 2em * $i; }
}//css style//------------------------------- .item-1 {  width: 2em; }.item-2 {  width: 4em; }

8.3 each循环

@each 指令的格式是 $var in <list>, $var 可以是任何变量名，比如 $length 或者 $name，而 <list> 是一连串的值，也就是值列表。

//sass style//------------------------------- @each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {    background-image: url('/images/#{$animal}.png');
  }
}//css style//-------------------------------.puma-icon {  background-image: url("/images/puma.png");
}.sea-slug-icon {  background-image: url("/images/sea-slug.png");
}.egret-icon {  background-image: url("/images/egret.png");
}.salamander-icon {  background-image: url("/images/salamander.png");
}

复杂对应each

//sass style//------------------------------- @each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {    font-size: $size;
  }
}//css style//-------------------------------h1 { font-size: 2em; }h2 { font-size: 1.5em; }h3 { font-size: 1.2em; }

9. 混合指令 (Mixin Directives)

9.1 不带参数的简单Mixin

混合指令（Mixin）用于定义可重复使用的样式，可以直接把一整段Sass代码替换到某个地方去。

//sass style//------------------------------- // 定义mixin reset, 用@mixin开头，后面跟空格和混合块的名字。然后是语句块@mixin reset {  
  padding: 0;  margin: 0;
}html, body, div , input {
  @include reset(); // 引用 reset 混合块。用@include指令引用混合块。}//css style//-------------------------------html, body, div, input {  padding: 0;  margin: 0;
}

9.2 带参数的Mixin

Mixin还可也添加参数，跟函数一样使用。

//sass style//------------------------------- @mixin sexy-border($color, $width) {  border: $width solid $color;
}p { @include sexy-border(blue, 1px); }//css style//-------------------------------p {  border: 1px solid blue;
}