LESS的原理及其使用方式

LESS的原理

本质上，LESS包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的css文件。

使用

http://lesscss.org/#

以上是官网的链接，具体安装使用都可以看到

LESS的语法

自定义变量

可在css文件中以以下格式来定义一个变量并进行引用

//声明格式
@变量名:值;
//使用格式
@变量名

混入（Mixins）

在LESS中，Mixins是指在一个class中引入另一个已经定义好的class，就像在当前的class中增加一个属性一样。

//声明格式
.类名(自定义变量) {
    样式定义
}
//使用方法，直接在其他类的样式中引用
.类名;

为了避免Mixins重名问题，可以使用命名空间

#空间名字{
    Mixins定义
}
//则引用时只要在前面加上空间名字即可
#空间名字 > .类名

嵌套的规则

HTML片段如下：

<div id="home"> 
<div id="top">top</div> 
<div id="center"> 
<div id="left">left</div> 
<div id="right">right</div> 
</div> 
</div>

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语法来代替

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

此文章很多引用如下

https://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/