Scss学习--关于Scss指令@if、@for...from...through...@each..in 、@while
@if条件判断语句@if (compare1){statement1}@else if (compare2){statement2}…@else{statementn}首先判断compare1中的语句如果不满足则判断compare2中的语句以此判断下去,直到第n条满足compare n语句时那么就执行 statement n中的语句$monster: duck;p.normal{backgroun
·
@if
条件判断语句
@if (compare1){
statement1
}@else if (compare2){
statement2
}…@else{
statementn
}
首先判断compare1中的语句
如果不满足则判断compare2中的语句
以此判断下去,直到第n条满足compare n语句时
那么就执行 statement n中的语句
$monster: duck;
p.normal{
background-color: if(1==2,red,green);
@if 1+2 != 3 {font-size:16px};
@if $monster == chicken {
color: red;
}@else if $monster == duck{
color: yellow;
}
}
@for…from…through…
for循环语句
for var from index_start through index_end
@for $i from 1 through 3{
.item-#{$i}{
margin: #{$i};
}
}
@each…in
in 后面可以跟map也可以跟list
$list_group:(green,red,purple,blue);
@each $modules in $list_group{
$index:index($list_group,$modules);
#{".item-"+$modules}{
color:#{$modules} ;
}
}
$dict:(background:red,font-size:18px);
#divnodeBox{
@each $protype,$value in $dict{
#{$protype}:#{$value};
}
}
@while
while compare{
statements;
}
如果compare为真那么就执行statement中的语句
$i:6;
@while $i>0{
#{".item-"+$i}{
font-size: #{$i}px;
};
$i:($i - 2);
}
更多推荐
已为社区贡献2条内容
所有评论(0)