控制指令

  • @if @else if @else
        $type: monster;
        p {
        @if $type == ocean {
            color: blue;
        } @else if $type == matador {
            color: red;
        } @else if $type == monster {
            color: green;
        } @else {
            color: black;
        }
        }
        // 编译为:
        p {
            color: green;
          }
    
    
  • @for循环有两种方式:@for $var from <start> through <end>,或者 @for $var from <start> to <end>,区别在于 through 与 to 的含义:当使用 through 时,条件范围包含 <start> 与 <end> 的值,而使用 to 时条件范围只包含 <start> 的值不包含 <end> 的值。另外,$var 可以是任何变量,比如 $i;<start> 和 <end> 必须是整数值。
    @for $i from 1 through 3 {
    .item-#{$i} { width: 2em * $i; }
    }
    //编译的结果:
    .item-1 {
     width: 2em;
     }
    .item-2 {
     width: 4em;
     }
    .item-3 {
     width: 6em;
     }
    

  • @each 指令的格式是 $var in <list>, $var 可以是任何变量名,比如 $length 或者 $name,而 <list> 是一连串的值,也就是值列表。
    @each $animal in puma, sea-slug, egret, salamander {
    .#{$animal}-icon {
        background-image: url('/images/#{$animal}.png');
    }
    }
    // 编译结果:
    .puma-icon {
        background-image: url('/images/puma.png'); }
    .sea-slug-icon {
        background-image: url('/images/sea-slug.png'); }
    .egret-icon {
        background-image: url('/images/egret.png'); }
    .salamander-icon {
        background-image: url('/images/salamander.png'); }
  • 多项遍历:
    	@each $animal, $color, $cursor in (puma, black, default),
    									(sea-slug, blue, pointer),
    									(egret, white, move) {
    	.#{$animal}-icon {
    		background-image: url('/images/#{$animal}.png');
    		border: 2px solid $color;
    		cursor: $cursor;
    		}
    	}
    	// 编译结果:
    	.puma-icon {
    			background-image: url('/images/puma.png');
    			border: 2px solid black;
    			cursor: default; }
    	.sea-slug-icon {
    			background-image: url('/images/sea-slug.png');
    			border: 2px solid blue;
    			cursor: pointer; }
    	.egret-icon {
    			background-image: url('/images/egret.png');
    			border: 2px solid white;
    			cursor: move; }
    
    	// 例子2:
    	@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
    	  #{$header} {
    		font-size: $size;
    	  }
    	}
    	// 编译:
    	h1 {
    	  font-size: 2em; }
    	h2 {
    	  font-size: 1.5em; }
    	h3 {
    	  font-size: 1.2em; }
    
  • @while 指令重复输出格式直到表达式返回结果为 false。这样可以实现比 @for 更复杂的循环
    $i: 6;
    @while $i > 0 {
    .item-#{$i} { width: 2em * $i; }
    $i: $i - 2;
    }
    // 编译:
    .item-6 {
     width: 12em; }
    
    .item-4 {
    width: 8em; }
    
    .item-2 {
    width: 4em; }
    

后面补上实际开发中应用场景

05-06 03:57