文档章节

less的实践笔记

前端届的科比
 前端届的科比
发布于 2015/11/27 16:59
字数 342
阅读 45
收藏 1

##less的使用示例

普通函数

参数前缀使用@

.icon(@width, @height) {
  display: block; 
  width: @width; 
  height: @height; 
}
.icon-1(@width, @height){
  display: block; 
  width: @width*1px; 
  height: @height*1px; 
}

a{.icon(400px,300px);}
span{.icon-1{400,300}}

带css-hack的写法 同函数名但不同签名的函数

// 兼容IE7+的input元素写法
@ie8-10-fix:~"\0";
@placeholderColor: #a8acb4;
.u-input(@height, @lineHeight, @paddingTop, @paddingBottom){
  height: 1px*@lineHeight;
  line-height: 1px*@lineHeight;
  padding-top:1px*@paddingTop;
  padding-bottom: 1px*@paddingBottom;
  height: @height*1px@ie8-10-fix;
  line-height:@height*1px@ie8-10-fix;
  padding-top: 0px@ie8-10-fix;
  padding-bottom: 0px@ie8-10-fix;
  *height: 1px*@height;
  *line-height: 1px*@height;
  *padding-top: 0;
  *padding-bottom: 0;
  &::-webkit-input-placeholder {color:@placeholderColor;}
  &:-moz-placeholder {color:@placeholderColor;}
  &::-moz-placeholder {color:@placeholderColor;}
  &:-ms-input-placeholder {color:@placeholderColor;}
}
.u-input(@height, @lineHeight, @paddingTop, @paddingBottom,@placeholderColor){
  height: 1px*@lineHeight;
  line-height: 1px*@lineHeight;
  padding-top:1px*@paddingTop;
  padding-bottom: 1px*@paddingBottom;
  height: @height*1px@ie8-10-fix;
  line-height:@height*1px@ie8-10-fix;
  padding-top: 0px@ie8-10-fix;
  padding-bottom: 0px@ie8-10-fix;
  *height: 1px*@height;
  *line-height: 1px*@height;
  *padding-top: 0;
  *padding-bottom: 0;
  &::-webkit-input-placeholder {color:@placeholderColor;}
  &:-moz-placeholder {color:@placeholderColor;}
  &::-moz-placeholder {color:@placeholderColor;}
  &:-ms-input-placeholder {color:@placeholderColor;}
}

@args的使用

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

&{}的使用 两个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();
  }
}

// 动画写法
&{
  .keyframes(bounce);
  .-frames(@-...){
    0% {@{-}transform:translate3d(0, 0,0);}
    25% {@{-}transform:translate3d(0,-5px,0);}
    50% {@{-}transform:translate3d(0,0,0);}
    75% {@{-}transform:translate3d(0,5px,0);}
    100% {@{-}transform:translate3d(0, 0,0);}
  }
}

//使用示例
.elem{.animation(bounce .8s infinite linear);}

优化版:

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


/**
.keyframes(demo_keyframes, {
  100% {.transform(rotate(360-43deg));}
});

.element{.animation(demo_keyframes .3s linear);}
*/

© 著作权归作者所有

共有 人打赏支持
上一篇: glob匹配模式
下一篇: backup_articles
前端届的科比
粉丝 21
博文 64
码字总数 51572
作品 0
深圳
私信 提问
敏捷教练成长记:漫漫长路第三周

看到跆拳道的软文,讲到: 学跆拳道的正确顺序: 第一阶段:有兴趣 第二阶段:没兴趣 第三阶段:逼练习 第四阶段:成习惯 第五阶段:有兴趣 第六阶段:真热爱 大部分家长在孩子第二阶段时放弃...

转型实践者
2017/11/17
0
0
AngularJS学习笔记 目录

自我学习弹性很大,我不是一个非常自律的人。但是就AngularJS来言,真的是一个超级赞的框架。真的! 第一遍学习感觉到了AngularJS的魅力,有很多不足。希望再接再厉!把我目前学到的东西分享...

Asktao
2016/07/30
151
0
敏捷教练成长记:平安夜中第八周

这是第八周,也是平安夜,愿大家平安。 上周计划完成情况 1、敏捷方面读不少于50页的书或者文章。 - 读了修改代码的艺术,暂未输出读书笔记。 - 完成《家长学校读本(一年级)》阅读,并输出...

通爸
2017/12/24
0
0
Spring.NET学习笔记——目录(原)

目录 前言 Spring.NET学习笔记——前言 第一阶段:控制反转与依赖注入IoC&DI Spring.NET学习笔记1——控制反转(基础篇) Level 200 Spring.NET学习笔记2——环境搭建(基础篇) Level 200 Sprin...

长平狐
2012/06/11
913
1
敏捷教练成长记:秋高气爽第四周

不知不觉坚持了四周了,这周很忙,写读书笔记时尽显疲态,有厌倦的感觉了。需要自我调整,继续坚持。 1、敏捷方面读不少于50页的书或者文章。 阅读《持续交付-发布可靠软件的系统方法》第三章...

转型实践者
2017/11/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Cookie 显示用户上次访问的时间

import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.Cookie;import javax.servlet.http.HttpServlet;import javax.serv......

gwl_
今天
1
0
网络编程

第14天 网络编程 今日内容介绍  网络通信协议  UDP通信  TCP通信 今日学习目标  能够辨别UDP和TCP协议特点  能够说出UDP协议下两个常用类名称  能够说出TCP协议下两个常用类名称...

stars永恒
今天
1
0
二进制相关

二进制 众所周知计算机使用的是二进制,数字的二进制是如何表示的呢? 实际就是逢二进一。比如 2 用二进制就是 10。那么根据此可以推算出 5的二进制等于 10*10+1 即为 101。 在计算机中,负数以...

NotFound403
昨天
3
0
day22:

1、写一个getinterface.sh 脚本可以接受选项[i,I],完成下面任务: 1)使用格式:getinterface.sh [-i interface | -I ip] 2)当用户使用-i选项时,显示指定网卡的IP地址;当用户使用-I选项...

芬野de博客
昨天
2
0
Spring Cloud Alibaba基础教程:使用Nacos实现服务注册与发现

自Spring Cloud Alibaba发布第一个Release以来,就备受国内开发者的高度关注。虽然Spring Cloud Alibaba还没能纳入Spring Cloud的主版本管理中,但是凭借阿里中间件团队的背景,还是得到不少...

程序猿DD
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部