sass的控制指令

sass的控制指令

if : 条件语句（判断语句）

for : 循环语句

while ：循环语句

each : 循环语句

html结构：

<h1 class="text">hello</h1>
<div class="wrap">选择器</div>
<p class="item">多选一吧</p>
<p class="title">逻辑运算符</p>

if 指令：

 @if 表达式 {
        // 表达式为真(表达式就是判断条件，表达式为真就是条件成立)，执行此处代码
}

表达式：可以是关系运算 或者 逻辑运算

关系运算符： > >= < <= == !=

逻辑运算符(与 或 非)：and(逻辑与) or(逻辑或) not(逻辑非)

scss示例：

$max:101;
$min:50;
.text {
    //如果 $max 大于 > 100
    @if $max>100 {
        color: red;
    }
    //如果 $max 等于== 100
    @if $max==100 {
        font-size: 50px;
    }
    //如果 $max 不等于!== 100
    @if $max !=100 {
        background-color: pink;
    }
}

if-else的嵌套使用：

@if 声明后面可以跟多个 @else if 声明，或者一个 @else 声明。如果 @if 声明失败，Sass 将逐条执行@else if声明，如果全部失败，最后执行 @else 声明.

二选一

@if 表达式 {
}@else{
}

scss示例：

//如果 $min > 100
@if $min>100 {
    .wrap {
        color: red;
        font-size: 50px;
    }
//否则    
}@else{
    .wrap {
        color: green;
        font-size: 50px;
    }
}

多选一

@if 表达式1 {
    // 表达式1 为真，执行此处代码，后边将不再执行 
}@else if 表达式2 {
    //表达式1 为假， 表达式2 为真，执行此处代码，后边将不再执行 
}@else if 表达式3 {
    //表达式1和2都 为假， 表达式3 为真，执行此处代码，后边将不再执行 
}@else{
    // 以上表达式都为假（条件都不成立） 执行else里边的代码
}

scss示例：

$len:10;
.item {
    padding: 50px;
    //如果 $len > 10
    @if $len>10 {
        border: 10px solid red;
    }
    //如果 $len < 10
    @else if $len < 10 {
        font-size: 30px;
    }
    //如果 $len == 10,
    @else if $len==10 {
        background-color: pink;
    }
}

逻辑运算符：

and : 要求两边的条件都要满足

$num:99;
.item {
    //如果 $num>50 并且 $num < 60
    @if $num>50 and $num < 60 {
        font-size: 50px;
    }
    //如果 $num > 60 并且 $num < 70
    @if $num>60 and $num < 70 {
        box-shadow: 0 0 10px 20px orange;
    }
    //否则(以上两个条件都不满足)
    @else {
        font-size: 50px;
        color: #fff;
        text-shadow: 0 0 5px #000, 0 0 5px skyblue;
    }
}

or: 只要一边条件满足即可

not: 真假互换

$number:0.4;
.title{
    //如果 $number > 2 或者 $number < 5
    @if $number > 2 or $number < 5{
        background-color: purple;
        color:#fff;
        font-size:50px;
    }
    //如果 $number 不大于 2
    @if not($number > 2){
        border:10px solid red;
    }
}