@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');
}
}