当前位置: 代码迷 >> Web前端 >> SASS详解之控制指令(if、each、for跟while)
  详细解决方案

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

热度:139   发布时间:2013-10-25 14:36:53.0
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基本规则有一定了解的小伙伴儿才能够理解。不过小伙伴儿们能看到这里,已经很厉害了。



  相关解决方案