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; 

  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%; 

 }