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 结构相对应的，这样使样式表书写更加简洁和更好的可读性。