Less用法指南
目录:
- 什么是LESS
- 目的
- 语法
- 变量(Variables)
- 混合(Mixins)
- 运算符(Operations)
- 功能函数(Functions)
- 嵌套规则(Nested Rules)
- 命名空间(Namespaces)
- 注释(Comments)
LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。
LESSCSS可以在多种语言、环境中使用,包括浏览器端、桌面客户端、服务端。
LESSCSS是一种由Alexis Sellier设计的动态层叠样式表语言。受Sass所影响,同时也影响了Sass的新语法:SCSS。[1]
LESSCSS是开源的,其第一个版本由Ruby写成,但在后续的版本当中,Ruby逐渐被复用为JavaScript。受益于JavaScript,LESS可以在客户端上运行(IE6+、Webkit、Firefox),也可以在服务端运行(Node.js、Rhino)。
学习笔记,里边加了一些体会。同时也希望以后不用去参照官方文档了。中文官网、英文官网。
其实更应该称为常量。因为只能取最后一次的赋值。
语法规则:
@变量名:值;
值可以是css属性值,也可以是其他变量
3.1.1 css属性值
@backColor: yellow; .a { background-color: @backColor; } @backColor: blue; .b { background-color: @backColor; }
.a { background-color: #0000ff; } .b { background-color: #0000ff; }
@backColor: blue;
@com: color; @color: #111; #header { background-color: @@com + 5 * 2; color: @color; }
#header { background-color: #1b1b1b; color: #111111; }
@color: red; #header { @color: white; .a { color: @color; // white } } .b { color: @color; // red }
#header .a { color: #ffffff; } .b { color: #ff0000; }
可以看出来,LESS中变量作用域处理方式和js一致,采用链式作用域方式。至于上面的嵌套写法,先不用理解,后面会说到。
用法:
1、统一的样式修改(当然没有LESS之前,我们也可以通过规范进行实现);
2、四则运算(Operations),虽然仅仅四则,但是已经可以完成大多数功能了;
3、和混合(Mixins)结合使用,你像使用函数一下使用他;
4、和js相同的链式作用域,前端工程师非常容易理解。
我把他分为两种形式:函数和复用。
Bad smell(代码的坏味道)中第一条一般就是Duplicated Code(重复代码)。如何解决?就是代码封装。Mixins就是这样一个作用。
函数:
.c(@bg: red) { background-color: @bg; width: 100px; height: 200px; } @bgc: yellow; .a { .c(@bgc); } @bgColor: @bgc + #111; .b { .c(@bgColor); } .d { .c(); }
.a { background-color: #ffff00; width: 100px; height: 200px; } .b { background-color: #ffff11; width: 100px; height: 200px; } .d { background-color: #ff0000; width: 100px; height: 200px; }
@arguments
这个写法借签了js的函数参数。一般用于一些简写方式:
.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){ -moz-box-shadow: @arguments; -webkit-box-shadow: @arguments; box-shadow: @arguments; } #header { .boxShadow(2px,2px,3px,#f36); }
#header { -moz-box-shadow: 2px 2px 3px #ff3366; -webkit-box-shadow: 2px 2px 3px #ff3366; box-shadow: 2px 2px 3px #ff3366; }
.d { .e; } .e { position: absolute; } #f { position: relative;; } .m { #f; }
.d { position: absolute; } .e { position: absolute; } #f { position: relative; } .m { position: relative; }
发现没有?.e和#f内容都存在。
注:class, id 属性集都可以以同样的方式复用。
“函数”和“复用”区别:
1、前者可以传参;
2、前者编译之后不存在,后者依然存在。
用法:
1、代码封装;
2、同变量一同,像函数一样使用,封装之后我们可以进行统一的样式修改;
3、样式复用,主要针对“复用”。
目前仅支持加、减、乘、除四则运算,主要针对数字、颜色、变量的操作。
@baseWith: 100px; @baseHeight: 50px; @baseColor: #333; .a { height: @baseHeight + 300; min-width: @baseWith - @baseHeight; width: @baseWith * 3; color: @baseColor / 3; }
.a { height: 350px; min-width: 50px; width: 300px; color: #111111; }
@com: 25px; #header { width: @com + 5 * 2; height: (@com + 5 ) * 2; }
#header { width: 35px; height: 60px; }
主要针对color的处理。提供如下函数:
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
本人使用的不是很多,想了解更详细的新可以参考官网,或者这里。
为了和上面做区分,同时带入一个新功能,以一个新例子开始。html代码如下:
<div id="header"> <h1><a href="http://www.cnblogs.com/hanyangecho/">hanyangecho</a></h1> <p>我的世界</p> </div>
#header { display: inline; float: left; h1 { font-size: 26px; font-weight: bold; a { text-decoration: none; color: #f36; &:hover { text-decoration: underline; color: #63f; } } } p { font-size: 12px; } }
#header { display: inline; float: left; } #header h1 { font-size: 26px; font-weight: bold; } #header h1 a { text-decoration: none; color: #f36; } #header h1 a:hover { text-decoration: underline; color: #63f; } #header p { font-size: 12px; }
说实话,第一次看到这种写法的时候,我就爱上LESS了。这不就是DOM的写法吗?这种写法无论后期维护、理解都是那么自然。是不是有一种本来就该如此的感觉?
注意一下上面那个&符号。
在Less中嵌套书写中有没有&是完全不一样的效果,有&时解析的是同一个元素或此元素的伪类,没有&解析是后代元素,我们一起来看一段代码
#header { &.fl{ float: left; } .mln { margin-left: 0; } }
#header.fl { float: left; } #header .mln { margin-left: 0; }
这种方式支持我们通过命名空间的方式访问上面嵌套中的“函数”或“复用”。
#header { .a(@bgColor: red) { background-color: @bgColor; } .b { width: 100px; } } .c { #header > .a(yellow); #header > .b; height: 200px; }
#header .b { width: 100px; } .c { background-color: #ffff00; width: 100px; height: 200px; }