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, 不要在意这些细节,就全当看短篇小说了,乐呵一下就好。
就这样吧,晚安啦~