sass控制语句和自定义函数

2018-11-27  本文已影响0人  凉生可可

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 表达式;
}
上一篇下一篇

猜你喜欢

热点阅读