sass 控制指令

控制指令

　　控制指令主要有：@if 、@for 、@while 、@each 四种，控制指令是一种高级功能， 主要与混合指令（mixin）配合使用 。尤其是在 Compass 库中 。

1 、@if

　　@if 跟 if 条件语句一样，也可以跟多个 @else if ，用返回值来判断输出的代码，当返回值为 true 时候输出后面 { } 中的代码，当返回值是 false 时，表示该条件不成立，将逐条执行 @else if 声明，如果全部不成立，最后执行 @else 声明 。

　　如下代码：

$name : cmy
p{
    @if $name == c {
        color : red ;
　　} @else if $name == m {
　　　color : blue ;
　　} @else if $name == y {
　　　color : green ;
　　} @else if $name == cmy {
　　　color : gold ;
　　}@else {
　　　color : yellow ;
　　}
}     

编译为：

p {
    color : gold ;
} 

2 、@for 

　　在 Sass 的 @for 循环中有两种方式：

　　@for $cmy from <start> through <end>

　　@for $cmy from <start> to <end>

• $cmy 表示变量
• start  表示起始值
• 关键字  through  表示包括  end  这个数
• to  表示不包括  end

eg1：trough关键字 ，如下代码：

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

编译为:

.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}

　　

　　eg2：to关键字 ，如下代码：

@for $i from 1 to 3 {
  .item-#{$i} { width: 2em * $i; }
}

编译为:

.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}

3 、@while 循环


　　@while 指令重复输出格式直到表达式返回结果为 false 。这个和 @for 指令很相似，只要 @while 后面的结果为 true 就会执行。

$i:4;    //变量赋值用 ： 而不是想js一样用 =
$i_width:100px;
@while $i>0{
    .item-#{$i}{ width:$i_width+$i}
    $i:$i-1;
}

编译为：

.item-1{
    width:104px;
}
.item-2{
　　width:103px;
}
.item-3{
    width:102px;
}
.item-4{
　　width:101px;
}

4 、@each 

　　@each 指令就是便利一个值列表，然后将变量作用于值列表中每一个项目，输出结果 。

　　格式：$var  in   <list>

　　　　　$var　变量名

　　　　　<list>　一连串的值，也就是值列表

　　eg：

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

编译后：

.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');
}