SCSS控制指令

SCSS控制指令

@if/@else if/@else 条件判断

scss代码

$theme:dark;
body{
    @if $theme==dark {background:black;}
    @else{background:white;}
}

css代码

body{
    background:black;
}

@for循环 注意范围 只能写数字

scss代码

@for $i from 1 through 3{
    .col-#{$i}{width:100% / $i;}
}

css代码

.col-1{width:100%;}
.col-2{width:50%;}
.col-3{width:33.33%;}

@each 遍历列表或映射

scss代码

$icons:error warning success;
@each $icon in $icons{
   .icon-#{$icon}{background-image:url("/images/#{$icon}.png");}
}

css代码

.icon-error{background-image:url("/images/error.png");}
.icon-warning{background-image:url("/images/warning.png");}
.icon-success{background-image:url("/images/success.png");}