sass揭秘之@if，@for，@each

因为文章内含有很多sass代码，如需自己动手查看编译结果，推荐使用sassmeister这款在线编译工具，方便你阅读学习。

经过上两篇揭秘，大家心里对sass应该有了很好的认知感了，这篇文章基于前面两篇为基础，请确保你先浏览了前面的两篇文章，不然可能给你带来疑惑感觉。

1.  sass揭秘之变量
2.  sass揭秘之@mixin，%，@function

这篇文章关键是对sass判断或循环的语法熟悉下，至于逻辑这东西，和其他的语言如js，php什么的是一样一样的，没什么说头。经过前两篇的积累，也就不需要那么啰嗦了，所以只写scss代码。现在你就可以想想css如果用上这些东西会是什么样子的呢？

@if

这个@if就不用解释吧，一看都知道是条件判断。这个东西对于浏览器兼容这块可以出不少力量；然后对于写一些基础的scss，控制样式的输出也是一大利器；当然还有很多很多了，反正是个必备的好东西就是了。先来个简单的例子吧：

$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;
  }
}

如果变量$lte7为真，就输出*display: inline;*zoom:1;，这个例子看着有点熟悉吧，前面@mixin已经说了，哈哈。sass的东西其实也就是这么多，转来转去就转回来了。

既然有@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;
}

这是半透明rgba背景的一段代码，高级浏览器用rgba，ie6-8如果开启滤镜用滤镜，不开启滤镜就用纯色，常用于图片下方浮现标题。至于多条件的，可以参考sass揭秘之@mixin,%,@function里面的神来之笔的@mixin prefixer

当然也不可能总是判断一个变量的真假那么简单࿰