sass控制语句和自定义函数

sass控制语句

关键词：sass控制语句

image

if判断表达式

@if 判断表达式{

}else if 判断表达式{

}else{

}

for循环

@for循环 有两种表现形式：

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

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

$var 表示变量

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

each遍历

既可以遍历列表，又可以遍历映射

@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
}

编译后的css:

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

while循环

执行用于循环重复的样式
举个栗子🌰

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

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

编译后的css:

.item-4 {
  width: 24px;
}

.item-3 {
  width: 23px;
}

.item-2 {
  width: 22px;
}

.item-1 {
  width: 21px;
}

Sass函数

自定义函数

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