CSS（层叠样式表）是一门历史悠久的标记性语言，是页面布局和样式展现的核心，到了css3功能已经很强大了，纯css结合html5就算不依靠javascript已经能做出比较酷炫的效果了，但是css一直有一个诟病，那就是一门非程序式语言，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码，说白了就是纯堆一些无脑的样式代码。这个时候less应运而生。LESS 原理及使用方式本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性.快速入门：LESS 文件


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

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


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

从上面的例子可以看出，学习 LESS 非常容易，只要你了解 CSS 基础就可以很容易上手。LESS 可以直接在客户端使用，也可以在服务器端使用。在实际项目开发中，我们更推荐使用第三种方式，将 LESS 文件编译生成静态 CSS 文件，并在 HTML 文档中应用。客户端使用方法 ：我们可以直接在客户端使用 .less（LESS 源文件），只需要从 http://lesscss.org下载 less.js 文件，然后在我们需要引入 LESS 源文件的 HTML 中加入如下代码：<link rel="stylesheet/less" type="text/css" href="styles.less">LESS 源文件的引入方式与标准 CSS 文件引入方式一样：<link rel="stylesheet/less" type="text/css" href="styles.less">需要注意的是：在引入 .less 文件时，rel 属性要设置为“stylesheet/less”。还有更重要的一点需要注意的是：LESS 源文件一定要在 less.js 引入之前引入，这样才能保证 LESS 源文件正确编译解析。服务端使用方法 ：

服务器端主要就是通过npm(node包管理器)来安装less，然后通过less将less文件编译成css文件安装命令：$ npm install -g less编译命令：$ lessc xx.less > xx.css(需要cd到指定less目录再打这个命令)常用例子：

变量 ：LESS 允许开发者自定义变量，变量可以在全局样式中使用，变量使得样式修改起来更加简单。我们可以从下面的代码了解变量的使用及作用：


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

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


.mythemes tableBorder { border: 1px solid #b5bcc7; }
从上面的代码中我们可以看出，变量是 VALUE（值）级别的复用，可以将相同的值定义成变量统一管理起来。该特性适用于定义主题，我们可以将背景颜色、字体颜色、边框属性等常规样式进行统一定义，这样不同的主题只需要定义不同的变量文件就可以了。混入：我们先简单看一下 Mixins 在 LESS 中的使用：LESS 文件

// 定义一个样式选择器
 .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; }

从上面的代码我们可以看出：Mixins 其实是一种嵌套，它允许将一个类嵌入到另外一个类中使用，被嵌入的类也可以称作变量，简单的讲，Mixins 其实是规则级别的复用。嵌套规则：在我们书写标准 CSS 的时候，遇到多层的元素嵌套这种情况时，我们要么采用从外到内的选择器嵌套定义，要么采用给特定元素加 CLASS 或 ID 的方式。在 LESS 中我们可以这样写：HTML 片段


&lt;div id="home"&gt; 
&lt;div id="top"&gt;top&lt;/div&gt;
&lt;div id="center"&gt; 
&lt;div id="left"&gt;left&lt;/div&gt; 
&lt;div id="right"&gt;right&lt;/div&gt; 
&lt;/div&gt; 
&lt;/div&gt;

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

从上面的代码中我们可以看出，LESS 的嵌套规则的写法是 HTML 中的 DOM 结构相对应的，这样使我们的样式表书写更加简洁和更好的可读性。同时，嵌套规则使得对伪元素的操作更为方便。运算及函数：在我们的 CSS 中充斥着大量的数值型的 value，比如 color、padding、margin 等，这些数值之间在某些情况下是有着一定关系的，那么我们怎样利用 LESS 来组织我们这些数值之间的关系呢？我们来看这段代码： LESS 文件


@init: #111111; 
@transition: @init*2; 
.switchColor { color: @transition; }

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


.switchColor { color: #222222; }
上面的例子中使用 LESS 的 operation 是 特性，其实简单的讲，就是对数值型的 value（数字、颜色、变量等）进行加减乘除四则运算。同时 LESS 还有一个专门针对 color 的操作提供一组函数。下面是 LESS 提供的针对颜色操作的函数列表：

lighten(@color, 10%); // return a color which is 10% *lighter* than @color
 darken(@color, 10%); // return a color which is 10% *darker* than @color 
saturate(@color, 10%); // return a color 10% *more* saturated than @color 
desaturate(@color, 10%);// return a color 10% *less* saturated than @color
 fadein(@color, 10%); // return a color 10% *less* transparent than @color
 fadeout(@color, 10%); // return a color 10% *more* transparent than @color 
spin(@color, 10); // return a color with a 10 degree larger in hue than @color 
spin(@color, -10); // return a color with a 10 degree smaller hue than @color

总结：LESS 以 CSS 语法为基础，又借用了很多我们熟知编程式语言的特性，这对于我们开发人员来讲学习成本几乎可以忽略，它在保留 CSS 语法的基础上扩展了更多实用的功能，LESS 为我们提供了一种新的编写样式表的方法，我们可以根据我们的项目特性选择使用 LESS 的部分特性，我们只需用很少的成本就可以换了很大的回报，一句话，Less is more，借助 LESS 可以更便捷的进行 Web 开发。更多less语言特性和内置函数请猛击下面两个链接：http://lesscss.org/features/http://lesscss.org/functions/