分類  >  Web前端 >

SASS詳解之控制指令(if、each、for跟while)

tags:    時間:2013-12-09 23:41:27
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基本規則有一定了解的小夥伴兒才能夠理解。不過小夥伴兒們能看到這裡,已經很厲害了。



推薦閱讀文章

Bookmark the permalink ,來源:互聯網