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

　　提到控制指令大家可能有点陌生。但是提到“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基本规则有一定了解的小伙伴儿才能够理解。不过小伙伴儿们能看到这里，已经很厉害了。