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