sass中的循環判斷條件語句

@if

$lte7:true !default;//是否兼容ie6,7 //inline-block //ie6-7 *display: inline;*zoom:1; 

@mixin inline-block {

　　display: inline-block;

　　 @if $lte7 {

　　　　*display: inline;*zoom:1;

　　}

}

既然有@if，那確定有@else啊

$filter:false !default; //是否開啓ie濾鏡 //背景色半透明 

@mixin bgcolor-alpha($bgcolor: rgba(0,0,0,.5)){

　　color:#fff; 

　　@if $filter{

　　　　　　filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#{ie-hex-str($bgcolor)}', endColorstr='#{ie-hex-str($bgcolor)}');

　　}

　　@else{

　　　　background-color: #333; 

　　}

　　background-color:$bgcolor;

}

sass的@if用not,or,and分別表示非，或，與。

$a: false !default;

$b: true !default;

@if not($a){

　　p{ color:red; }

}

div{

　　font-size:14px;

　　@if $a or $b{

　　　　 width:300px;

　　}

}

li{

　　 line-height:24px;

　　@if $a and $b{

　　　　float:left;

　　 }

}

sass用==,!=分別表示等於與不等於。

@for

for循環有兩種形式，分別爲：@for $var from through 和@for $var from to 。

$i表示變量，start表示起始值，end表示結束值，這兩個的區別是關鍵字through表示包括end這個數，而to則不包括end這個數。先來個簡單的：

@for $i from 1 through 3 {

　　.item-#{$i} {

　　　　width: 2em * $i;

　　 }

 }

@each

語法：@each $var in

@each $animal in puma, sea-slug, egret, salamander {

　　.#{$animal}-icon {

 　　　　background-image: url('/images/#{$animal}.png');

　　}

}