LESS笔记
使用LESS可以简化CSS的书写。
LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。一个简单的例子：
@color: #4D926F; #header { color: @color; } h2 { color: @color; }
对应的CSS：
#header { color: #4D926F; } h2 { color: #4D926F; }
变量
LESS
@border-color : #b5bcc7; .mythemes tableBorder{ border : 1px solid @border-color; }
对应的CSS
.mythemes tableBorder { border: 1px solid #b5bcc7; }
变量是值级别的复用，可以将相同的值定义起来统一管理。
LESS中也有变量范围：
@width : 20px; #homeDiv { @width : 30px; #centerDiv{ width : @width; } } #leftDiv { width : @width; }
对应CSS
#homeDiv #centerDiv { width: 30px; } #leftDiv { width: 20px; }
Mixins(混入)
混入指在一个class中引入另一个已经定义的class,如：
.roundedCorners(@radius:5px) { -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; } #header { .roundedCorners; } #footer { .roundedCorners(10px); }
对应CSS
#header { -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; } #footer { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }
LESS支持 Parametric Mixins（混入参数），如
.borderRadius(@radius){ -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; } #header { .borderRadius(10px); } .btn { .borderRadius(3px); }
对应CSS：
#header { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } .btn { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
还可以给Mixins定义默认值：
.borderRadius(@radius:5px){ -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; } .btn { .borderRadius; }
对应CSS：
.btn { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
LESS的命名空间：
#mynamespace { .home {...} .user {...} }
嵌套规则
HTML：
<div id="home">
<div id="top">top</div>
<div id="center">
<div id="left">left</div>
<div id="right">right</div>
</div>
</div>
LESS：
#home{ color : blue; width : 600px; height : 500px; border:outset; #top{ border:outset; width : 90%; } #center{ border:outset; height : 300px; width : 90%; #left{ border:outset; float : left; width : 40%; } #right{ border:outset; float : left; width : 40%; } } }
CSS：
#home { color: blue; width: 600px; height: 500px; border: outset; } #home #top { border: outset; width: 90%; } #home #center { border: outset; height: 300px; width: 90%; } #home #center #left { border: outset; float: left; width: 40%; } #home #center #right { border: outset; float: left; width: 40%; }
LESS 的嵌套规则的写法是 HTML 中的 DOM 结构相对应的，这样使样式表书写更加简洁和更好的可读性。