CSS预处理技术总结(一)Less
2016-07-25 21:22
543 查看
css预处理技术已经发展的比较成熟了,通过css预处理技术可以很好的提升css的编程性,提高css代码的开发效率和可维护性,目前比较热门的相关技术有Sass、Less CSS、Stylus、Compass等,最近也陆续在项目中用到了这些技术,所以就来个总结吧,本文为系列文章第二篇,主要讨论Less。
相比Sass而言,Less要简单易上手一些,但是编程性较Sass而言,略有不足,所以也有人说它更适合设计师学习,但这并不妨碍它的广泛使用,因为Less本身的语法就已经很够用了,Twitter大名鼎鼎的Bootstrap项目就是基于Less构建而成,以下是前端项目中经常会用到的一些Less语法:
less注释二,不会被编译到css,建议之后只维护less,所以可多用这种注释
比如定义一个样式类.border,直接用到另一个样式类.box里,另一个样式类就很方便的具有了这个类的样式,很好的实现了css代码的复用;
再比如有一个.box2,它和.box有一些属性相同,那就直接继承.box再做特定的修改即可:
混合(mixin):可带参数,以实现传入变量参数来用同一个样式类生成各种不同的样式:
混合(mixin)参数可带默认值(多个参数之间使用逗号隔开)
一些常见的兼容性写法就可以用混合封装起来进行简化:
下面通过less模式匹配,定义不同样式模式的三角(top模式和bottom模式),但无论哪种模式,@_(放在模式参数位置)定义的样式所有模式都公有。
//要输出这样的值我们可以在字符串前加上一个 ~, 例如:
http://www.bootcss.com/p/lesscss/
作者 @浩时代
2016.07.25
相比Sass而言,Less要简单易上手一些,但是编程性较Sass而言,略有不足,所以也有人说它更适合设计师学习,但这并不妨碍它的广泛使用,因为Less本身的语法就已经很够用了,Twitter大名鼎鼎的Bootstrap项目就是基于Less构建而成,以下是前端项目中经常会用到的一些Less语法:
一 注释
less注释一,会被编译到css/**/
less注释二,不会被编译到css,建议之后只维护less,所以可多用这种注释
//
二 变量
定义变量用 @变量名:变量值; 使用该变量值时用 @变量名@width: 300px; body { background-color: white; } .div1 { width: @width; }
三 混合(mixin)
混合可以将一个定义好的class A轻松的引入到另一个class B中,从而简单实现class B继承class A中的所有属性。还可以带参数地调用。比如定义一个样式类.border,直接用到另一个样式类.box里,另一个样式类就很方便的具有了这个类的样式,很好的实现了css代码的复用;
再比如有一个.box2,它和.box有一些属性相同,那就直接继承.box再做特定的修改即可:
.border { border: solid 1px black; } .box { .border; //注意这里! } .box2 { .box; //还有这里! margin: 20px; }
混合(mixin):可带参数,以实现传入变量参数来用同一个样式类生成各种不同的样式:
.border2(@border_width) { //定义变量参数 border: @border_width solid black; } .box3 { .border2(5px); //参数位置传入变量以控制不同的样式 } .box4 { .border2(10px); }
混合(mixin)参数可带默认值(多个参数之间使用逗号隔开)
.border3(@border_width2:5px) { border: @border_width2 solid black; } .box5 { .border3(); // }
一些常见的兼容性写法就可以用混合封装起来进行简化:
.border_radius(@border_radius:2px) { border-radius: @border_radius; -moz-border-radius: @border_radius; -webkit-border-radius: @border_radius; }
四 模式匹配
有些情况想根据传入的参数来改变混合的默认呈现,比如:下面通过less模式匹配,定义不同样式模式的三角(top模式和bottom模式),但无论哪种模式,@_(放在模式参数位置)定义的样式所有模式都公有。
.triangle(@_,@w,@c) { //@_模式定义的样式是所有模式都公有的部分 width: 0; height: 0; overflow: hidden; } .triangle(top,@w,@c) { //朝上的三角,这里用到了CSS的boder画三角 border-width: @w; border-color: transparent transparent @c transparent; border-style: dashed dashed solid dashed; } .triangle(bottom,@w,@c) { //朝下的三角 border-width: @w; border-color: @c transparent transparent transparent; border-style: solid dashed dashed dashed; } .triangle2 { .triangle(bottom, 20px, red); } .triangle3 { .triangle(top, 30px, green) }
五 运算(对变量进行加减乘除等)
@box_width: 100px; .box6 { width: (@box_width - 10)*2; }
六 嵌套
可以在一个选择器中直接嵌套另一个选择器来实现继承,这样很大程度减少了代码量,并且代码看起来结构更加清晰:.list1 { width: 600px; height: 600px; li { //相当于在外边写 .list li{} height: 20px; a { float: left; //&代表上一层选择器,所以这样写相当于 .list a:hover{} &:hover { color: red; } } } }
七 @arguments
@arguments包含了所有传递进来的参数. 如果你不想单独处理每一个参数的话就可以像这样写:.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) { box-shadow: @arguments; //相当于()参数里的值放到了这 -moz-box-shadow: @arguments; -webkit-box-shadow: @arguments; } .box-shadow(2px, 5px);
八 避免编译
有时候需要输出一些不正确的CSS语法或者使用一些 LESS不认识的专有语法.//要输出这样的值我们可以在字符串前加上一个 ~, 例如:
.class1 { filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()"; //css中会是 filter: ms:alwaysHasItsOwnSyntax.For.Stuff(); }
九 Less参考资料
1 完整的Less中文文档:http://www.bootcss.com/p/lesscss/
作者 @浩时代
2016.07.25
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 盒子模型
- CSS选择器
- CSS样式优先权
- [css] line-height 百分比单位和数值单位的区别
- css如何搞正方形
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- rem : web app适配的秘密武器
- jquery高级应用之Deferred对象
- 移动端点击事件全攻略,这里的坑你知多少?
- $q 实例分析 Angular 中的 Promise
- 浏览器中唤起native app || 跳转到应用商城下载
- Angular directive 实例详解
- 关于浮动与清除浮动,你应该知道的
- 数组reduce方法的高级技巧
- 设计更快的网页(三):字体和 CSS 调整