sass compact方法的实现

不想依赖compass的编译器,但sass的又没有compact方法,于是自己造轮子。最早时在stackoverflow看到一个


@function compact($var-1,        $var-2: false,
                  $var-3: false, $var-4: false,
                  $var-5: false, $var-6: false,
                  $var-7: false, $var-8: false,
                  $var-9: false, $var-10: false) {
  $full: $var-1;
  $vars: $var-2, $var-3, $var-4, $var-5,
         $var-6, $var-7, $var-8, $var-9, $var-10;

  @each $var in $vars {
    @if $var {
      $full: $full, $var;
    }
  }
  @return $full;
}

.aaa {
    content: compact(1,2, null,7, 0 ,44);
}

这里有一个神奇的用法,如何将一个个元素串起一个数组($full: $full, $var

不过太怪了,@if又不写小括号,有点像ruby。更奇怪的是,它的@if不会过滤0。下面是我造的轮子,改动不大。



@function compact($var-1,      $var-2: false,
                  $var-3: false, $var-4: false,
                  $var-5: false, $var-6: false,
                  $var-7: false, $var-8: false,
                  $var-9: false, $var-10: false) {
  $full:();
  $vars: $var-1, $var-2, $var-3, $var-4, $var-5,
         $var-6, $var-7, $var-8, $var-9, $var-10;

  @each $var in $vars {
    @if ($var){
       $full : append($full, $var, comma);
    }
  }
  @return $full;
}

.aaa {
    content: compact(1,2, null,7, 0 ,44);
}

轮子3,使用可变长参数,节省大量代码。轮子越造越好,超越老外了。



@function compact($args...) {
    $ret: ();
    @each $i in $args{
        @if($i){//if 不会过滤0
            $ret: append($ret, $i, comma);
        }
    }
    @return $ret;
}

.aaa {
    content: compact(blue, red, false, green);
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值