sass控制语句和自定义函数

@if 判断表达式{

}else if 判断表达式{

}else{

}

@for $var from 开始值 through 结束值 （包括结束位置）

@for $var from 开始值 to 结束值 （不包括结束值）

$var 表示变量

$count:4;
@for $i from 1 throughn $count{
    col-#{si}{
        width:100%/$count*$i
    }
}

@each $i in <list/map> 

$i 表示变量

$list3: name11 name22 name33 name44 name55;
@mixin hunheh{
    @each $i in $list3{
        .span#{$i}{
            background: url("/images/#{$i}.jpg") no-repeat;
        }
    }
}

.div{
    @include hunheh
}

.div .spanname11 {  // 如果不需要类名组，直接在全局中调用混合宏就行了。
background: url("/images/name11.jpg") no-repeat; }
.div .spanname22 {
background: url("/images/name22.jpg") no-repeat; }
.div .spanname33 {
background: url("/images/name33.jpg") no-repeat; }
.div .spanname44 {
background: url("/images/name44.jpg") no-repeat; }
.div .spanname55 {
background: url("/images/name55.jpg") no-repeat; }

$types: 4;
$type-width: 20px;

@while ($types > 0) {
    .item-#{$types} {
        width: $type-width + $types;
    }
    $types: $types - 1;
}

.item-4 {
  width: 24px;
}

.item-3 {
  width: 23px;
}

.item-2 {
  width: 22px;
}

.item-1 {
  width: 21px;
}

@function 函数名称(参数列表){
    @return 表达式；
}