sass08 if while for each

scss

@function getzIndex($layer: default){
  $zindexMap: (default: 1, modal: 1000, dropdown: 500, grid: 300);
  $zindex: 1;
  @if map-has-key($zindexMap, $layer){
    $zindex: map-get($zindexMap, $layer);
  }
  @return $zindex;
}

@debug getzIndex('afd');
//$layer可选：default,modal,dropdown,grid







$screenWidth: 500;
body{
  color: if($screenWidth > 768, blue, red);//三目运算，没有@符号
}

@if $screenWidth > 768{
  body{
    color: red;
  }
}
@else if $screenWidth >400{
  span{
    color: green;
  }
}
@else{
  p{
    color: blue;
  }
}

@for $i from 1 to 5{    //for语句
  .span#{$i}{
    width: 20% * $i;
  }
}

$j: 6;
@while $j > 0{
  .p#{$j}{
    width: 20% * $j;
  }
  $j: $j - 3;
} 

$k: 1;
@each $c in blue, red, green {
  .div#{$k}{
    color: $c;        //$c是遍历的每一个值
  }
  $k: $k+1;
}

@each $key,$color in (default, blue), (info, green), (danger, red){
  .text-#{$key}{
    color: $color;
  }
}

@each $key, $kk in (default: blue, info: green, danger: red){
  .label-#{$key}{
    color: $kk;
  }
}

css

body {
  color: red;
}

span {
  color: green;
}

.span1 {
  width: 20%;
}

.span2 {
  width: 40%;
}

.span3 {
  width: 60%;
}

.span4 {
  width: 80%;
}

.p6 {
  width: 120%;
}

.p3 {
  width: 60%;
}

.div1 {
  color: blue;
}

.div2 {
  color: red;
}

.div3 {
  color: green;
}

.text-default {
  color: blue;
}

.text-info {
  color: green;
}

.text-danger {
  color: red;
}

.label-default {
  color: blue;
}

.label-info {
  color: green;
}

.label-danger {
  color: red;
}

/*# sourceMappingURL=demo1.css.map */