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 表达式;
}