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

　　}

}

转载于:https://www.cnblogs.com/cina33blogs/p/7600260.html