SASS详解之控制指令(if、each、for和while)

客官°小女子只卖身不卖艺 2022-09-17 10:27 667阅读 0赞

提到控制指令大家可能有点陌生。但是提到“if”、“each”、“for”和“while”，大家也许不太陌生了。很多语言中都经常和这些打交道，而SASS详解之控制指令就是为大家介绍在SASS中怎么使用“if”、“each”、“for”和“while”。

# 　SASS中的if #

If是用来判断用的，那么在SASS中的if应该怎么写呢?如下

*SASS代码*

p {
    	@if 1 + 1 == 2 {
    		width:30px;
    	}@else {
    		width:100px;  
    	}
    }

*编译后的CSS代码*

p {
      width: 30px;
    }

有if，那么就还得有else，就还得有“==”等一系列判断的符号，如下

*SASS代码*

p {
    	$a:true !default;
    	$b:false !default;
    
    	@if not($a) {
    		border:1px solid red;
    	}@else {
    		border:1px solid green;
    	}
    
    	div{
    	    @if $a or $b {
    		width:300px;
    	    }
    	}
    
    	li{
    		height:20px;
    		@if $a and $b {
    			float:left;
    		}
    	}
    	
    }
    
    $width: 5px !default;
    
    .meng {
    	height:20px;
    	@if $width != 0 {
    		border:1px solid red;
    	}
    }  
    
    $sizeClass: small !default;
    
    .long {
    	@if $sizeClass == 'small' {
    		padding:5px;
    	} @else {
    		padding:10px;
    	}
    }

*编译后的CSS代码*

p {
      border: 1px solid green;
    }
    p div {
      width: 300px;
    }
    p li {
      height: 20px;
    }
    
    .meng {
      height: 20px;
      border: 1px solid red;
    }
    
    .long {
      padding: 5px;
    }

# 　SASS中的each #

这个就是循环的意思，详细的大家还是看例子来的更直观，如下

## 　图片循环 ##

*SASS代码*

@each $meng in meng1, meng2, meng3, meng4 {
      .#{$meng}-long {
        background-image: url('/images/#{$meng}.png');
      }
    }

*编译后的CSS代码*

.meng1-long {
      background-image: url("/images/meng1.png");
    }
    
    .meng2-long {
      background-image: url("/images/meng2.png");
    }
    
    .meng3-long {
      background-image: url("/images/meng3.png");
    }
    
    .meng4-long {
      background-image: url("/images/meng4.png");
    }

## 　图片合并 ##

*SASS代码*

$sprite: long1 long2 long3 long4 long5 !default;
    
    %spriteAll{
        background: url('menglong.png') no-repeat;
    }
    
    @each $one in $sprite {
        .#{$one}-two {
            @extend %spriteAll;     
            background-position:0 index($sprite,$one)*(-30px);
        }
    }

*编译后的CSS代码*

.long1-two, .long2-two, .long3-two, .long4-two, .long5-two {
      background: url("menglong.png") no-repeat;
    }
    
    .long1-two {
      background-position: 0 -30px;
    }
    
    .long2-two {
      background-position: 0 -60px;
    }
    
    .long3-two {
      background-position: 0 -90px;
    }
    
    .long4-two {
      background-position: 0 -120px;
    }
    
    .long5-two {
      background-position: 0 -150px;
    }

# 　SASS中的for #

for循环有两种形式，分别为：@for $var from through 和@for $var from to 。$i表示变量，start表示起始值，end表示结束值，这两个的区别是关键字through表示包括end这个数，而to则不包括end这个数。

## 　@for $var from through的例子 ##

*SASS代码*

@for $i from 1 through 5 {
    	.meng#{$i} {
    		width : 2px * $i;
    	}
    }

*编译后的CSS代码*

.meng1 {
      width: 2px;
    }
    
    .meng2 {
      width: 4px;
    }
    
    .meng3 {
      width: 6px;
    }
    
    .meng4 {
      width: 8px;
    }
    
    .meng5 {
      width: 10px;
    }

## 　@for $var from to的例子 ##

*SASS代码*

@for $i from 1 to 5 {
    	.meng#{$i} {
    		height : 2px * $i;
    	}
    }

*编译后的CSS代码*

.meng1 {
      height: 2px;
    }
    
    .meng2 {
      height: 4px;
    }
    
    .meng3 {
      height: 6px;
    }
    
    .meng4 {
      height: 8px;
    }

# 　SASS中的while #

While是指多次输出，直到该语句的嵌套样式的计算结果为false，相比前几个，while循环更加难以理解一些。

*SASS代码*

$i: 6;
    $end : -2;
    
    @while $i > $end {
      .item-#{$i} { width: 2px * $i; }
      $i: $i - 2;
    }

*编译后的CSS代码*

.item-6 {
      width: 12px;
    }
    
    .item-4 {
      width: 8px;
    }
    
    .item-2 {
      width: 4px;
    }
    
    .item-0 {
      width: 0px;
    }

SASS详解之控制指令就为大家介绍到这里了，SASS详解之控制指令是SASS中比较高级的部分，可能得需要一切其他语言的基础才能够理解，更需要对之前SASS基本规则有一定了解的小伙伴儿才能够理解。不过小伙伴儿们能看到这里，已经很厉害了。