less

less

LESS 原理及使用方式

本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。下面是一个简单的例子： LESS 文件

 @color: #4D926F; 

 #header { 
  color: @color; 
 } 
 h2 { 
  color: @color; 
 }

经过编译生成的 CSS 文件如下： CSS 文件

 #header { 
  color: #4D926F; 
 } 
 h2 { 
  color: #4D926F; 
 }

定义变量

LESS 允许开发者自定义变量，变量可以在全局样式中使用，变量使得样式修改起来更加简单。

我们可以从下面的代码了解变量的使用及作用：

 @border-color : #b5bcc7; 

 .mythemes tableBorder{ 
   border : 1px solid @border-color; 
 }

嵌套

嵌套的规则

在我们书写标准 CSS 的时候，遇到多层的元素嵌套这种情况时，我们要么采用从外到内的选择器嵌套定义，要么采用给特定元素加 CLASS 或 ID 的方式。在 LESS 中我们可以这样写： 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 文件如下： CSS 文件

 #home { 
  color: blue; 
   600px; 
  height: 500px; 
  border: outset; 
 } 
 #home #top { 
  border: outset; 
   90%; 
 } 
 #home #center { 
  border: outset; 
  height: 300px; 
   90%; 
 } 
 #home #center #left { 
  border: outset; 
  float: left; 
   40%; 
 } 
 #home #center #right { 
  border: outset; 
  float: left; 
   40%; 
 }