sass 流程控制指令@if、@for、@each、@while

1.@if控制指令

@if()函数允许您根据条件进行分支，并仅返回两种可能结果中的一种。

语法方式同js的if....else if ...else

看流程图

代码形式：

.container{
    // 第一种
    @if(/* 条件 */){
        // ...
    }

    // 第二种
    @if(/* 条件 */){
        // ...
    }@else{
        // ...
    }
    
    // 第三种
    @if(/* 条件 */){
        // ...
    }@else if(){
        // ...
    }@else{
        // ...
    }
}

例1

$theme:"green";
.container {
    @if $theme=="red" {
        color: red;
    }
    @else if $theme=="blue" {
        color: blue;
    }
    @else if $theme=="green" {
        color: green;
    }
    @else {
        color: darkgray;
    }
}

例如，定义一个css的三角形@mixin声明

@mixin triangle($direction:top, $size:30px, $border-color:black) {
    width: 0px;
    height: 0px;
    display: inline-block;
    border-width: $size;
    border-#{$direction}-width: 0;
    @if ($direction==top) {
        border-color: transparent transparent $border-color transparent;
        border-style: dashed dashed solid dashed;
    }
    @else if($direction==right) {
        border-color: transparent transparent transparent $border-color;
        border-style: dashed dashed dashed solid;
    }
    @else if($direction==bottom) {
        border-color: $border-color transparent transparent transparent;
        border-style: solid dashed dashed dashed;
    }
    @else if($direction==left) {
        border-color: transparent $border-color transparent transparent;
        border-style: dashed solid dashed dashed;
    }
}

使用

.p0 {
    @include triangle();
}

.p1 {
    @include triangle(right, 50px, red);
}

.p2 {
    @include triangle(bottom, 50px, blue);
}

.p3 {
    @include triangle(left, 50px, green);
}

html

<p class="p0"></p>
<p class="p1"></p>
<p class="p2"></p>
<p class="p3"></p>

2.@for指令

@for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。这个指令包含两种格式：@for $var from through ，或者 @for $var from to

区别在于 through 与 to 的含义：

• 当使用through时，条件范围包含与的值。

• 而使用to 时条件范围只包含的值不包含 的值。

• 另外，$var 可以是任何变量，比如 $i； 和 必须是整数值。

例1

@for $i from 1 to 4 {
    .p#{$i} {
        width: 10px * $i;
        height: 30px;
        background-color: red;
    }
}

@for $i from 1 through 3 {
    .p#{$i} {
        width: 10px * $i;
        height: 30px;
        background-color: red;
    }
}

使用

<p class="p1"></p>
<p class="p2"></p>
<p class="p3"></p>

例2：加载动画

#loading {
    position: fixed;
    top: 200px;
    left: 46%;
}

#loading span {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #3498db;
    opacity: 0.5;
    border-radius: 50%;
    animation: loading 1s infinite ease-in-out;
}

#loading span:nth-child(1) {
    left: 0;
    animation-delay: 0s;
}

#loading span:nth-child(2) {
    left: 20px;
    animation-delay: 0.2s;
}

#loading span:nth-child(3) {
    left: 40px;
    animation-delay: 0.4s;
}

#loading span:nth-child(4) {
    left: 60px;
    animation-delay: 0.6s;
}

#loading span:nth-child(5) {
    left: 80px;
    animation-delay: .8s;
}

@keyframes loading {
    0% {
        opacity: 0.3;
        transform: translateY(0px);
    }
    50% {
        opacity: 1;
        transform: translateY(-20px);
        background: green;
    }
    100% {
        opacity: 0.3;
        transform: translateY(0px);
    }
}

html

<div id="loading">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

用@for改进动画部分

@for $i from 1 to 5 {
    #loading span:nth-child(#{$i}) {
        left: 20 * ($i - 1) + px;
        /* animation-delay: 20 * ($i - 1) / 100 + s; */
        animation-delay: unquote($string: "0.") + ($i - 1) * 2 + s;
    }
}

3.@each指令

@each 指令的格式是 $var in , $var 可以是任何变量名，比如 $length 或者 $name，而 是一连串的值，也就是值列表。

例如做如下效果

普通CSS的写法

p{
    width: 10px;
    height: 10px;
    display: inline-block;
    margin: 10px;
}
.p0{
    background-color: red;
}
.p1{
    background-color: green;
}
.p2{
    background-color: blue;
}

.p3{
    background-color:turquoise;
}

.p4{
    background-color: darkmagenta;
}

用@each改进

$color-list:red green blue turquoise darkmagenta;
@each $color in $color-list {
    $index: index($color-list, $color);
    .p#{$index - 1} {
        background-color: $color;
    }
}

4.@while 指令

@while 指令重复输出格式直到表达式返回结果为 false。这样可以实现比 @for 更复杂的循环。

用sass实现bootstrap中css的这么一段代码

https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.css

.col-sm-12 {
    width: 100%;
}

.col-sm-11 {
    width: 91.66666667%;
}

.col-sm-10 {
    width: 83.33333333%;
}

.col-sm-9 {
    width: 75%;
}

.col-sm-8 {
    width: 66.66666667%;
}

.col-sm-7 {
    width: 58.33333333%;
}

.col-sm-6 {
    width: 50%;
}

.col-sm-5 {
    width: 41.66666667%;
}

.col-sm-4 {
    width: 33.33333333%;
}

.col-sm-3 {
    width: 25%;
}

.col-sm-2 {
    width: 16.66666667%;
}

.col-sm-1 {
    width: 8.33333333%;
}

用@while实现

$column:12;
@while $column>0 {
    .col-sm-#{$column} {
        width: $column / 12 * 100%;
        // width: $column / 12 * 100 + %; 会标红
        width: $column / 12 * 100#{"%"};
        width: unquote($string: $column / 12 * 100 + "%");
    }
    $column:$column - 1;
}