Less的点滴总结
2015-06-19 14:46
176 查看
Less is more than css.
LESS 是动态的样式表语言,通过简洁明了的语法定义,使编写 CSS 的工作变得非常简单。
LESS
可以直接在客户端使用,也可以在服务器端使用。在实际项目开发中,我们更推荐使用第三种方式,通过 LESS 的编译器,将 LESS 文件编译生成静态 CSS 文件,并在 HTML 文档中应用。
1、变量
CSS RESET(重置样式表),在 Web 开发中,我们往往需要屏蔽浏览器默认的样式行为而需要重新定义样式表来覆盖浏览器的默认行为,这里可以使用 LESS 的变量特性,这样就可以在不同的项目间重用样式表,我们仅需要在不同的项目样式表中,根据需求重新给变量赋值即可。
它是多重继承的一种实现,在 LESS 中,混入是指在一个 CLASS 中引入另外一个已经定义的 CLASS,就像在当前 CLASS 中增加一个属性一样。
Mixins
还有一种形式叫做 Parametric Mixins(混入参数),LESS 也支持这一特性:
完整的应该如下所写:
hover的书写方式:
LESS 是动态的样式表语言,通过简洁明了的语法定义,使编写 CSS 的工作变得非常简单。
LESS
可以直接在客户端使用,也可以在服务器端使用。在实际项目开发中,我们更推荐使用第三种方式,通过 LESS 的编译器,将 LESS 文件编译生成静态 CSS 文件,并在 HTML 文档中应用。
1、变量
<span style="font-size:12px;">@border-color : #b5bcc7; .mythemes tableBorder{ border : 1px solid @border-color; }</span>该特性适用于定义主题,我们可以将背景颜色、字体颜色、边框属性等常规样式进行统一定义,这样不同的主题只需要定义不同的变量文件就可以了。当然该特性也同样适用于
CSS RESET(重置样式表),在 Web 开发中,我们往往需要屏蔽浏览器默认的样式行为而需要重新定义样式表来覆盖浏览器的默认行为,这里可以使用 LESS 的变量特性,这样就可以在不同的项目间重用样式表,我们仅需要在不同的项目样式表中,根据需求重新给变量赋值即可。
<span style="font-size:12px;"> @width : 20px; #homeDiv { @width : 30px; #centerDiv{ width : @width;// 此处应该取最近定义的变量 width 的值 30px } } #leftDiv { width : @width; // 此处应该取最上面定义的变量 width 的值 20px }</span>2、Mixins(混入)
它是多重继承的一种实现,在 LESS 中,混入是指在一个 CLASS 中引入另外一个已经定义的 CLASS,就像在当前 CLASS 中增加一个属性一样。
Mixins
还有一种形式叫做 Parametric Mixins(混入参数),LESS 也支持这一特性:
// 定义一个样式选择器 .borderRadius(@radius){ -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; } // 使用已定义的样式选择器 #header { .borderRadius(10px); // 把 10px 作为参数传递给样式选择器 } .btn { .borderRadius(3px);// // 把 3px 作为参数传递给样式选择器 }默认值:
.borderRadius(@radius:5px){ -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; } .btn { .borderRadius(); }三角:
完整的应该如下所写:
.sanjiao{ width:0px; height: 0px; overflow: hidden; border-width: 10px; border-color: transparent transparent red transparent; border-style: dashed dashed solid dashed; }//匹配
.trangle(top,@w:5px,@c:#ccc){ border-width: @w; border-color: transparent transparent @c transparent; border-style: dashed dashed solid dashed; } .sanjiao{ .trangle(top,100px,#000); }都具备的默认属性,需要添加如下代码:
.trangle(@_,top,@w:5px,@c:#ccc){ width: 0px; height: 0px; overflow: hidden; }常用样式的书写与使用:
.pos(f){ position: fixed; } .test{ …… .pos(f); }运算:
@test_01:300px; .box_02{ width: @test_01 - 20*5; }
@init: #111111; @transition: @init*2; .switchColor { color: @transition; }对于颜色的操作的函数列表:
lighten(@color, 10%); // return a color which is 10% *lighter* than @color darken(@color, 10%); // return a color which is 10% *darker* than @color saturate(@color, 10%); // return a color 10% *more* saturated than @color desaturate(@color, 10%);// return a color 10% *less* saturated than @color fadein(@color, 10%); // return a color 10% *less* transparent than @color fadeout(@color, 10%); // return a color 10% *more* transparent than @color spin(@color, 10); // return a color with a 10 degree larger in hue than @color spin(@color, -10); // return a color with a 10 degree smaller hue than @color
init: #f04615; #body { <span style="white-space:pre"> </span>background-color: fadein(@init, 10%); }
hover的书写方式:
a { color: red; text-decoration: none; &:hover {// 有 & 时解析的是同一个元素或此元素的伪类,没有 & 解析是后代元素 color: black; text-decoration: underline; } }变量很多,不想一一写出来怎么办,@argument
.border_arg(@w:3px, @color:red, @xx:solid){ border:@arguments; } .test_arguments{ .border_arg(40px); }避免编译,使用滤镜(例如filter之类的就可以在前边加~,还须实际中进行测试)
.test_03{ width: 300px; calc(300px-30px);//浏览器计算 <span style="color: rgb(34, 34, 34); font-family: Arial, sans-serif; line-height: 22.375px; background-color: rgb(249, 249, 249);">~</span> 'calc(300px-30px)'; //避免编译 }
相关文章推荐
- 【性能诊断】八、并发场景的性能分析(windbg案例,连接泄露)
- 编辑距离和最长公共子串
- 风险案例-29期- 项目管理投入不够, 缺乏项目统筹全局观,使项目成本、进度、质量存在很大风险
- opencv 基本数据类型 cvPoint cvSize cvScalar cvRect
- com.google.gson.internal.LinkedTreeMap cannot be cast to test.UserBean at t..
- SWT常用组件
- Win32开发 - windbg调试命令
- Dos命令将合并两个文本文件的内容
- Android 百度地图2.4.2版本标注动画效果
- 风险案例-28期-项目Leader与团队成员缺乏沟通,问题响应度较慢导致团队士气低落,工作效率低
- hybris Commerce Developer Part 1
- ubuntu安装redis的方法以及PHP安装redis扩展、CI框架sess使用redis的方法
- Bash 快捷键大全
- 一步步走进Android MaterialDesign
- phpsso忘记密码的解决办法
- nodejs+express+ejs+mongoose实例
- 【华为oj】提取不重复的整数
- GIT 恢复已删除的提交
- 如何用js判断不同浏览器
- SAT阅读8道填空练习题精选