LESS中给mixin传递代码块

说到less是好久以前就用过了,因为语法很简单,很容易上手,能很方便的提高书写css的效率,自己玩儿的也是飞起。直到那一次为了写动画,出现了一个问题: 因为用到很多keyframes,所以就要写大量的重复的前缀做兼容。当时自己尚年少,还木有接触到前端自动化的各大神器,所以当时想到的就是自己写个mixin来做这些事情呗。然后纠结着写了一上午,愣是写不出一个可以方便使用的mixin,简直沮丧。 然后翻阅google,发现sass可以很方便的解决这个问题,因为人家有个很方便的特性叫做@content,可以很方便的解决问题,比如这样

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content;
  }

  @-moz-keyframes #{$name} {
    @content;
  }

  @keyframes #{$name} {
    @content;
  }
}

@include keyframes(fadeIn) {
  from {
    opacity: 0%;
  }
  to {
    opacity: 100%;
  }
}

然后就会被编译成这样:

@-webkit-keyframes fadeIn {
  from {
    opacity: 0%;
  }
  to {
    opacity: 100%;
  }
}

@-moz-keyframes fadeIn {
  from {
    opacity: 0%;
  }
  to {
    opacity: 100%;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0%;
  }
  to {
    opacity: 100%;
  }
}

这酸爽~ 然后稍做考虑,就从less跳向了sass。后来和sass相处也一直很愉快,因为sass有很多特性都特别好用,能完成更复杂的事情。最开始选less没选sass主要是因为sass写起来要比less麻烦一些,从上面的例子中就稍微可以看出一些来。

再然后就是最近的项目又开始用less了,主要原因是因为less实在写起来很简单,再一个就是sass的特性也不是很经常用,日常用less足矣,接着就又出现了上面说的问题。。。

脑子当时第一时间的反应是:“妹的!不会又要转去sass吧?!”,后来少做冷静,我觉得再用less试试,说不能会有好办法,继续翻阅google,然后就发现了这样一条信息
“LESS在1.7.0版本中加入了一个新特性,叫做 passing rulesets to mixins”,哎呦喂~ 果断去文档瞅了两眼,就是这货!
然后就出现了下面的代码:

.keyframes(@name, @rules) {
  @-webkit-keyframes @name {
    @rules();
  }

  @-moz-keyframes @name {
    @rules();
  }

  @keyframes @name {
    @rules();
  }
}

.keyframes(fadeIn, {
  from {
    opacity: 0%;
  }
  to {
    opacity: 100%;
  }
});

怎么样,“就是这个味儿!”,而且还加量不加价哦~

文档中说这里可以传入的不只是变量,css代码块,还可以传入mixin哦~ 将函数作为参数听上去是不是有些耳熟?没错,就是js,利用这个特性我们可以写出很多有趣的东西出来,这里就不多扯了,嘿嘿~

很好,今天也就这样吧,感觉扯了一堆没有用的,最后干货就最后几句话。。。 Orz, 不要在意这些细节,就全当看短篇小说了,乐呵一下就好。

就这样吧,晚安啦~

标签: less

已有 4 条评论

  1. Anran Anran

    icon_idea.gif

  2. icon_smile.gif

添加新评论

icon_question.gificon_razz.gificon_sad.gificon_evil.gificon_exclaim.gificon_smile.gificon_redface.gificon_biggrin.gificon_surprised.gificon_eek.gificon_confused.gificon_cool.gificon_lol.gificon_mad.gificon_twisted.gificon_rolleyes.gificon_wink.gificon_idea.gificon_arrow.gificon_neutral.gificon_cry.gificon_mrgreen.gif