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{

     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} {

     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