文档章节

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);}
*/

© 著作权归作者所有

共有 人打赏支持
前端届的科比
粉丝 21
博文 64
码字总数 51572
作品 0
深圳
Spring.NET学习笔记——目录(原)

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

长平狐
2012/06/11
887
1
敏捷教练成长记:漫漫长路第三周

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

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

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

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

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

通爸
2017/12/24
0
0
敏捷教练成长记:秋高气爽第四周

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

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

没有更多内容

加载失败,请刷新页面

加载更多

原型模式

1、原型模式-定义 用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象 克隆(浅度克隆->拷贝值类型或者引用,深度克隆->创建新的对象,开辟新的内存) 例如客户端知道抽象Pro...

阿元
今天
53
0
awk命令扩展使用操作

awk 中使用外部shell变量 示例1 [root@centos01 t1022]# A=888[root@centos01 t1022]# echo "" | awk -v GET_A=$A '{print GET_A}'888[root@centos01 t1022]# echo "aaaaaaaaaaaaa" | aw......

野雪球
今天
47
0
深入解析MySQL视图VIEW

Q:什么是视图?视图是干什么用的? A:视图(view)是一种虚拟存在的表,是一个逻辑表,本身并不包含数据。作为一个select语句保存在数据字典中的。   通过视图,可以展现基表的部分数据;...

IT--小哥
今天
50
0
虚拟机学习之二:垃圾收集器和内存分配策略

1.对象是否可回收 1.1引用计数算法 引用计数算法:给对象中添加一个引用计数器,每当有一个地方引用它时,计数器值就加1;当引用失效时,计数器值就减1;任何时候计数器值为0的对象就是不可能...

贾峰uk
今天
53
0
smart-doc功能使用介绍

smart-doc从8月份底开始开源发布到目前为止已经迭代了几个版本。在这里非常感谢那些敢于用smart-doc去做尝试并积极提出建议的社区用户。因此决定在本博客中重要说明下smart-doc的功能,包括使...

上官胡闹
昨天
50
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部