从CSS理解LESS

首先要知道LESS 做为 CSS 的一种形式的扩展，它并没有阉割 CSS 的功能，而是在现有的 CSS 语法上，添加了很多额外的功能，所以学习 LESS 是一件轻而易举的事情，果断学习之！
Less中文网站上这样介绍到：

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。 Less 可以运行在 Node 或浏览器端。

那么与css相比它到底有什么特性呢？首先来说说CSS。
作为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题：CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码，造成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。LESS 在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情。

引入变量
变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了

LESS文件

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

编译后的CSS

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

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

混合

混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。
LESS文件

.rounded-corners (@radius: 5px) {  border-radius: @radius;  -webkit-border-radius: @radius;  -moz-border-radius: @radius;}#header {  .rounded-corners;}#footer {  .rounded-corners(10px);}

编译后的CSS

#header {  border-radius: 5px;  -webkit-border-radius: 5px;  -moz-border-radius: 5px;}#footer {  border-radius: 10px;  -webkit-border-radius: 10px;  -moz-border-radius: 10px;}

嵌套规则

我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。
LESS文件

#header {  h1 {    font-size: 26px;    font-weight: bold;  }  p { font-size: 12px;    a { text-decoration: none;      &:hover { border-width: 1px }    }  }}

编译后的CSS

#header h1 {  font-size: 26px;  font-weight: bold;}#header p {  font-size: 12px;}#header p a {  text-decoration: none;}#header p a:hover {  border-width: 1px;}

函数 & 运算

运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码，如果你愿意的话可以操作属性值。
LESS文件

@the-border: 1px;@base-color: #111;@red:        #842210;#header {  color: @base-color * 3;  border-left: @the-border;  border-right: @the-border * 2;}#footer {   color: @base-color + #003300;  border-color: desaturate(@red, 10%);}

编译后的CSS

#header {  color: #333;  border-left: 1px;  border-right: 2px;}#footer {   color: #114411;  border-color: #7d2717;}

在客户端使用

引入你的 .less 样式文件的时候要设置 rel 属性值为 “stylesheet/less”:

<link rel="stylesheet/less" type="text/css" href="styles.less">

下载 less.js, 在 中引入:

<script src="less.js" type="text/javascript"></script>

注意你的less样式文件一定要在引入less.js前先引入。

备注：请在服务器环境下使用！本地直接打开可能会报错！

在服务器端使用

安装

在服务器端安装 LESS 的最简单方式就是通过 npm(node 的包管理器), 像这样:

$ npm install less

如果你想下载最新稳定版本的 LESS，可以尝试像下面这样操作:

$ npm install less@latest

本文部分内容参考以下网站：
LESS：http://www.bootcss.com/p/lesscss/
LESS中文网：http://lesscss.cn/