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