文档章节

less的实践笔记

前端届的科比
 前端届的科比
发布于 2015/11/27 16:59
字数 342
阅读 44
收藏 1
点赞 0
评论 0

##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
深圳
敏捷教练成长记:漫漫长路第三周

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

转型实践者
2017/11/17
0
0
敏捷教练成长记:秋高气爽第四周

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

转型实践者
2017/11/26
0
0
敏捷教练成长记:平安夜中第八周

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

通爸
2017/12/24
0
0
AngularJS学习笔记 目录

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

Asktao
2016/07/30
151
0
Spring.NET学习笔记——目录(原)

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

长平狐
2012/06/11
887
1
迟来的2017总结文

悄然过去的2017年,仿佛还来不及说再见。突然想起那天科比球衣退役时热泪盈眶地在宿舍看直播的自己。 默默做个总结来迎接新的一年。 2017年走过的城市还蛮多的。一年下来,半年北方,半年小厦...

胖胖雕
01/10
0
0
【基础篇】2-列表、元组、字典与集合 章节练习

章节练习的目的是帮助大家自己动手实践并理解章节的知识点,同时对所学进行扩展。扩展部分往往没有在正文中提到,也没有过多的解释,目的就是帮助大家提升自学和自行理解的能力。 点击阅读和...

王诗翔
07/08
0
0
Vue 新手学习实战宝典

Vue.js 实践和应用相关的内容太丰富了,整理成这个目录和分类,想研究哪方面的,随便自取,玩得开心~ 实践: Vue.js 开发实践系列 by @aryu (1)实现精巧的无限加载与分页功能 (2)实现多条...

楠木楠
2016/12/01
1K
0
敏捷教练成长记:冬日阳光第六周

不知不觉坚持了六周,这是三个月成长计划的一半,忙碌充实,坚持!坚持!坚持! 上周计划完成情况 1、敏捷方面读不少于50页的书或者文章。 - 粗读《高效程序员的45个习惯-敏捷开发修炼之道》全书...

转型实践者
2017/12/10
0
0
Tensorflow学习资源

tensorflow学习笔记二:入门基础 http://www.cnblogs.com/denny402/p/5852083.html 转置函数(tf.transpose):http://blog.csdn.net/u010417185/article/details/51900441 tf.reshape函数:......

NORTHhan
2017/03/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

【RocketMQ】Message存储笔记

概述 消息中间件存储分为三种,一是保存在内存中,速度快但会因为系统宕机等因素造成消息丢失;二是保存在内存中,同时定时将消息写入DB中,好处是持久化消息,如何读写DB是MQ的瓶颈;三是内...

SaintTinyBoy
4分钟前
0
0
Android应用Context详解及源码解析

Android应用Context详解及源码解析 本文定位:优质文章收集 本文转载 1 背景 今天突然想起之前在上家公司(做TV与BOX盒子)时有好几个人问过我关于Android的Context到底是啥的问题,所以就马...

lichuangnk
35分钟前
0
0
PostgreSQL的昨天今天和明天

PostgreSQL 是一种非常复杂的对象-关系型数据库管理系统(ORDBMS), 也是目前功能最强大,特性最丰富和最复杂的自由软件数据库系统。有些特性甚至连商业数据库都不具备。 这个起源于伯克利(...

闻术苑
40分钟前
0
0
Mysql对自增主键ID进行重新排序

1,删除原有主键: ALTER TABLE `table_name` DROP `id`; 2,添加新主键字段: ALTER TABLE `table_name` ADD `id` MEDIUMINT( 8 ) NOT NULL FIRST; 3,设置新主键: ALTER TABLE `table_nam......

niithub
45分钟前
0
0
福利篇:免费csdn vip账号分享

分享一个发布免费csdn vip账号的网站:啰嗦vip www.lostvip.com , 各种软件开发类的视频教程:慕课网、动脑学院、黑马各大培训机构VIP视频教程,非常不错!

在水一方发盐人
52分钟前
0
0
Nginx+Tomcat搭建高性能负载均衡集群

一、 工具   nginx-1.8.0   apache-tomcat-6.0.33 二、 目标   实现高性能负载均衡的Tomcat集群:    三、 步骤   1、首先下载Nginx,要下载稳定版:      2、然后解压两个Tom...

码代码的小司机
53分钟前
0
0
Centos7编译安装ntp-4.2.8p11

Centos7编译安装ntp-4.2.8p11 背景 因公司做等保评级,在进行安全漏洞检测时发现ntp需要升级到ntp-4.2.7p25以上版本,经过一番搜索,没有该版本及新版本ntp的yum安装包,所以只能编译安装了,...

阿dai
今天
0
0
antd pro 新增模块的步骤

index.js是整个项目的入口文件。 // 1. Initializeconst app = dva({ history: createHistory(),});// 2. Pluginsapp.use(createLoading());// 3. Register global modelapp.model......

灯下草虫鸣_
今天
0
0
Cisco VPN在win10下报Error 56的解决办法

问题描述 Cisco VPN在win10下报Error 56: The Cisco Systems, Inc. VPN Service has not been started 解决方案 方案一:在计算机管理-》服务 查看Cisco Systems, Inc. VPN Service服务是否存...

chenfj_fer
今天
0
0
Weblogic问题解决记录

问题:点击登录,页面刷新但是不进去管理界面。解决:删除cookies再登录。

wffger
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部