关于less的css3前缀的写法

css 专栏收录该内容
61 篇文章 1 订阅

每天坚持做一件事(这事当然是有点难度和意义的事情,而不是睡觉。。。)还真不容易,有两天没有写前端笔记了。一方面是正职工作忙,另一面是感觉能输出的东西越来越少。那今天来分享的什么的,找来找去,觉得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这些构建工具是可以的。至于考拉,可以去试下,我没怎么用。

  • 1
    点赞
  • 0
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值