scss
@function getzIndex($layer: default){ $zindexMap: (default: 1, modal: 1000, dropdown: 500, grid: 300); $zindex: 1; @if map-has-key($zindexMap, $layer){ $zindex: map-get($zindexMap, $layer); } @return $zindex; } @debug getzIndex('afd'); //$layer可选:default,modal,dropdown,grid $screenWidth: 500; body{ color: if($screenWidth > 768, blue, red);//三目运算,没有@符号 } @if $screenWidth > 768{ body{ color: red; } } @else if $screenWidth >400{ span{ color: green; } } @else{ p{ color: blue; } } @for $i from 1 to 5{ //for语句 .span#{$i}{ width: 20% * $i; } } $j: 6; @while $j > 0{ .p#{$j}{ width: 20% * $j; } $j: $j - 3; } $k: 1; @each $c in blue, red, green { .div#{$k}{ color: $c; //$c是遍历的每一个值 } $k: $k+1; } @each $key,$color in (default, blue), (info, green), (danger, red){ .text-#{$key}{ color: $color; } } @each $key, $kk in (default: blue, info: green, danger: red){ .label-#{$key}{ color: $kk; } }
css
body { color: red; } span { color: green; } .span1 { width: 20%; } .span2 { width: 40%; } .span3 { width: 60%; } .span4 { width: 80%; } .p6 { width: 120%; } .p3 { width: 60%; } .div1 { color: blue; } .div2 { color: red; } .div3 { color: green; } .text-default { color: blue; } .text-info { color: green; } .text-danger { color: red; } .label-default { color: blue; } .label-info { color: green; } .label-danger { color: red; } /*# sourceMappingURL=demo1.css.map */