LESS 是动态的样式表语言，通过简洁明了的语法定义，使编写 CSS 的工作变得非常简单。
CSS（层叠样式表）是一门历史悠久的标记性语言，同 HTML 一道，被广泛应用于万维网（World Wide Web）中。HTML 主要负责文档结构的定义，CSS 负责文档表现形式或样式的定义。
作为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题：CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用。造成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。
LESS 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情
Koala编译器
koala是一个前端预处理器语言图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容windows、linux、mac。
编译器将LESS文件编译成为CSS文件，在HTML中引入使用。这里要强调的一点，LESS是完全兼容CSS语法的，也就是说，我们可以将标准的CSS文件直接改成 .less 格式，LESS编译器可以完全识别。
Less语法
Less注释
提供//注释方式
//———-不会被编译，即编译成css文件后并不显示该注释/**/——–会被编译
变量
变量声明方式，使用@开头声明：@变量名：值
使用方式：
@test_width:200px;
.box{
width: @test_width;
}
LESS 中的变量和其他编程语言一样，可以实现值的复用，同样它也有生命周期，也就是 Scope（变量范围，开发人员惯称之为作用域），简单的讲就是局部变量还是全局变量的概念，查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局。
变量也可使用在选择器上，而不仅仅是使用在样式属性上。
// Selector interpolation only works in 1.3.1+. Try it!
@theGoodThings: .food, .beer, .sleep, .javascript;
@{theGoodThings} {
font-weight: bold;
}
混合
若想让box元素也拥有border样式，以前的写法是将类名border加入box元素的class中；而使用Less可以直接这样写：
//混合
.border{
border: 2px solid #000;
}
.box{
.border;
}
若想都拥有border但是细节上有所不同，Less中可以传递参数来实现：
//带参数的混合
.border2(@border_width){
border: @border_width solid red;
}
.box{
.border2(10px, red);
}
混合也可设置默认值：
//带默认值的混合
.border3(@border_width:2px){
border: @border_width solid red;
}
.box{
.border3();
}
匹配模式
//朝下三角形，其他三角形需要去改变border-color和corder-style
.triangle{
width: 0;
height: 0;
overflow: hidden;
border-width: 10px
border-color: red transparent transparent transparent;
border-style: solid dashed dashed dashed;
}
使用Less匹配模式，解决三角形改变方向的麻烦写法。
//朝下三角形
.triangle(down, @w:5px, @c:#eee){
border-width: @w;
border-color: @c transparent transparent transparent;
border-style: solid dashed dashed dashed;
}
//朝上三角形
.triangle(top, @w:5px, @c:#eee){
border-width: @w;
border-color: transparent transparent @c transparent;
border-style: dashed dashed solid dashed;
}
//朝左三角形
.triangle(left, @w:5px, @c:#eee){
border-width: @w;
border-color: transparent @c transparent transparent;
border-style: dashed solid dashed dashed;
}
//朝右三角形
.triangle(right, @w:5px, @c:#eee){
border-width: @w;
border-color: transparent transparent transparent @c;
border-style: dashed dashed dashed solid;
}
//使用@_匹配所有的模式，所有的模式都会带下面的样式
.triangle(@_, @w:5px, @c:#eee){
width: 0;
height: 0;
overflow: hidden;
}
像 JavaScript 中 arguments一样，Mixins 也有这样一个变量：@arguments。@arguments 在 Mixins 中具是一个很特别的参数，当 Mixins 引用这个参数时，该参数表示所有的变量。
LESS 也采用了命名空间的方法来避免重名问题，于是乎 LESS 在 mixins 的基础上扩展了一下，看下面这样一段代码：
#mynamespace{
.home {...}
.user {...}
}
这样我们就定义了一个名为 mynamespace 的命名空间，将一些变量或者混合模块打包起来，如果我们要复用 user 这个选择器的时候，我们只需要在需要混入这个选择器的地方这样使用：
#mynamespace > .user
运算
加减乘除运算都支持：
@test_width:200px;
.box{
width: @test_width + 100;
}
.box2{
width: （@test_width - 100）* 5;
color: #ccc - 10;//颜色会变深一点，但用的少
}
嵌套规则
嵌套一般用法
在我们书写标准 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 文件如下：
#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 结构相对应的，这样使我们的样式表书写更加简洁和更好的可读性。同时，嵌套规则使得对伪元素的操作更为方便。
&的嵌套
&代表父元素选择器
a {
color: red;
text-decoration: none;
&:hover {// 有 & 时解析的是同一个元素或此元素的伪类，没有 & 解析是后代元素
color: black;
text-decoration: underline;
}
}
上述LESS文件，经过编译生成的 CSS 文件如下：
a {
color: red;
text-decoration: none;
}
a:hover {
color: black;
text-decoration: underline;
}
它不是代表最近的父元素选择器，而是包含所有祖先元素的选择器
.header {
.menu {
border-radius: 5px;
.no-borderradius & {
background-image: url('images/button-background.png');
}
}
}
编译后为：
.header .menu {
border-radius: 5px;
}
.no-borderradius .header .menu {
background-image: url('images/button-background.png');
}
嵌套 Media Queries
.one {
@media (width: 400px) {
font-size: 1.2em;
@media print and color {
color: blue;
}
}
}
编译输出：
@media (width: 400px) {
.one {
font-size: 1.2em;
}
}
@media (width: 400px) and print and color {
.one {
color: blue;
}
}
避免编译
有时候我们需要输出一些不正确的 CSS 语法或者使用一些 LESS 不认识的专有语法。 要输出这样的值我们可以在字符串前加上一个 ~，例如：
.class {
filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
width: ~"calc(300px-30px)";
}
这叫作“避免编译”，输出结果为：
.class {
filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
width: calc(300px-30px);
}
在避免编译的值中间也可以像字符串一样插入变量：
.class {
@what: "Stuff";
filter: ~"ms:alwaysHasItsOwnSyntax.For.@{what}()";
}
字符串插值
变量可以用像 @{name} 这样的结构，以类似 ruby 和 php 的方式嵌入到字符串中：
@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");
选择器插值
如果需要在选择器中使用 LESS 变量，只需通过使用和字符串插件一样的 @{selector} 即可，例如：
@name: blocked;
.@{name} {
color: black;
}
注意：(~”@{name}”) 语句可以在 LESS 1.3.1 等之前版本中使用，但 1.4.0 版将不再支持这种用法。
LESS 与 SASS
同类框架还有 SASS 。两者都属于 CSS 预处理器，功能上大同小异，都是使用类似程序式语言的方式书写 CSS, 都具有变量、混入、嵌套、继承等特性，最终目的都是方便 CSS 的书写及维护。
LESS对于初学者来说是极好的：它非常容易使用和设置，它跟CSS非常像,写起来非常直观，简单还有友好，我曾经非常喜欢LESS。
Sass
Sass有很多可用的方法和逻辑。例如：条件和循环语句。LESS也可以做到，但不是很高效且不直观。像LESS一样，Sass也内置了一些非常友好的函数，像颜色，数字，还有变量列表。
Sass用户可以使用功能强大的Compass库。这些库LESS用户也可以用，但并不完全一样，因为这是由一个庞大的社区来共同维护的。Compass有非常强大的特性，像自动生成图片切片（CSS Sprites)，传统浏览器支持，还有对CSS3的跨浏览器支持等。
Compass同样允许你使用外部框架像Blueprint, Foundation 或 Bootstrap。这也意味着你可以非常容易的使用你喜欢的框架而不需要掌握各种不同的工具。