关于less的css3前缀的写法

每天坚持做一件事（这事当然是有点难度和意义的事情，而不是睡觉。。。）还真不容易，有两天没有写前端笔记了。一方面是正职工作忙，另一面是感觉能输出的东西越来越少。那今天来分享的什么的，找来找去，觉得less的css3前缀的写法可以分享。因为最近也一直在准备用less写个css3动画库，简化css3动画的开发。

    css3前缀

    比如我们要写一个animation的css3动画，为了兼容多家浏览器，需要在前面加各种前缀：

div{//标准的写法      animation:fadeIn   1 s; }

div{//加前缀          -webkit-animation:fadeIn   1 s;      -moz-animation:fadeIn   1 s;      -ms-animation:fadeIn   1 s;      -o-animation:fadeIn   1 s;      animation:fadeIn   1 s; }

     这时候，如果你是用less（sass应该也有这种功能），那么他的 混入 写法就很方便了

    less写法

    可以先定义一个animation的混入

.animation(@args){      -webkit-animation:@args;      -moz-animation:@args;      -ms-animation:@args;      -o-animation:@args;      animation:@args; }

    然后再调用

div{ .animation(fadeIn   1 s);//把动画当做参数传进去即可 }

    这样写的好处是，你后面的所有的animation动画都可以直接调用混入 .animation(@args)，不用管前缀了。

    less更简单的写法

    上面的写法解决了animation的前缀，但是如果是transition呢？又需要写一个transition的混入

.transition(@arg){      -webkit-transition:@args;      -o-transition:@args;      -ms-transition:@args;      -moz-transition:@args;      transition:@args; }

    其实代码还是有重复的，能不能再简化呢？答案是可以的！我们先写一个单单处理前缀的混入

. pre (@style,@value){      -webkit-@{style}: @value;         -moz-@{style}: @value;          -ms-@{style}: @value;              @{style}: @value; }

    然后再写各个属性的：

.animation(@value){      . pre (animation,@value); }   .transition(@arg){      . pre (transition,@arg); }

    这样页面出现的css3前缀只有一次，看起来舒服多了。

    keyframes的写法

    这时候，也许会有童鞋想到动画帧了，这个同样存在前缀的问题。因为他的写法有点特殊，不能使用上面的pre混入：

@keyframes {      0% , 100% {} } @-webkit-keyframes {      0% , 100% {} } @-moz-keyframes {      0% , 100% {} } @-ms-keyframes {      0% , 100% {} } @ -0 -keyframes {      0% , 100% {} }

    这时候，我们可以为他单独定义一个keyframes混入，把动画帧抽离出来：

.keyframes(@name) {       @-webkit-keyframes @name {          .-frames(-webkit-)      }      @-moz-keyframes @name {          .-frames(-moz-)      }      @-o-keyframes @name {          .-frames(-o-)      }      @-ms-keyframes @name {          .-frames(-ms-)      }      @keyframes @name {          .-frames()      } }

    但是具体怎么用呢，看到上面里面还有.-frames()的混入，感觉很凌乱，我举个具体的动画例子，你就知道怎么写了：

    比如做一个之前的一篇文章介绍了匀速旋转的圆 这个动画：

.rotate(){      .keyframes(rotate);      .-frames(@-...){          0% , 100% {              @{-}transform:rotate( 0 deg);          }          100% {              @{-}transform:rotate( 360 deg);          }      } }

    上面定义了一个rotate()混入，调用了keyframes()，声明了动画帧为rotate的动画。因为旋转的动画会用到transform，而transform又是需要加前缀的，当然你可以用上面介绍的方法去写：

.transform(@arg){//先定义一个混入      . pre (transform,@arg); }   //再在动画帧里面应用 0% , 100% {    .transform(rotate( 0 deg); } 100% {      .transform(rotate( 360 deg); }

    这样的写法生成的css还是很冗余的，他会在每个keyframes下生成所有前缀的transform，这是多余的，我们只有在相应的前缀下生成相应的transform就行了。

    比如在@-webkit-keyframes下只需要生成-webkit-transform。

    最简化的写法就是在.-frames()传入相应的前缀参数，然后接收参数时通过@{-}来接收。比如transform：

.-frames(@-...){//这里的参数写法是固定的          0% , 100% {              @{-}transform:rotate( 0 deg);          }          100% {              @{-}transform:rotate( 360 deg);          }      }

    这样基本就讲完了。还有一点关于编译的问题，用sublime的童鞋，用里面的less2css是无法编译上面的写法的，之前有篇文章介绍过。我用的是nodejs的编译，比如fis、grunt这些构建工具是可以的。至于考拉，可以去试下，我没怎么用。