在接触 bootstrap 的时候接触到一个以前没有见过的词 LESS，这个词与 CSS 类似，但是据说 LESS 是 CSS 的扩充，使用 LESS 不但可以方便的管理网站的样式，而且还可以更加灵活处理不同浏览器情况下的差异处理。对于开发者来讲，LESS 是一款方便编写的工具。

LESS 是在 CSS 的基础上增加了包含变量、混合、套嵌等扩展语法。不过虽然如此，浏览器并不支持直接识别 LESS，只有经过编译成 CSS 文档或者浏览器引入 less.js 文件即可使用 LESS 文件。举例：

如代码显示，LESS 文件的后缀是 *.less 在引入浏览器的时候，请注意 type 、rel 和 rev 都是与 CSS 的引入不太一样。

互联网的发展速度就是不断的颠覆，了解了 LESS 的优越性之后才知道之前手动编写的 CSS 既复杂又不规范。看来学是无止境的。使用 LESS 编写网站的优越性是不言而喻的，举个比较成功的例子，AkibaRika 的博客便是使用 LESS 编写的 CSS 。

LESS 只是 CSS 的拓展，如果对 CSS 很熟悉的话，LESS 就非常容易掌握。对 LESS 的学习我也是刚刚开始，以下知识有不正确的地方还请大家多多指正。

工具准备

上文提到，LESS 可以编译成标准的 CSS 文档或者与 less.js 文件一起引入，一般来讲，如果没有特别的要求，为了节省服务器资源，都会选择预先编译好完整的 CSS 文件再引入。LESS 文件本身可以使用任何编辑器编写。所以编译工具必须要有。推荐的离线编译器有：simpless 或者 winless。

如果方便上网的话，也可以选择使用在线编译工具，详情可以去网上搜索。

LESS 基础语法简介

LESS 的语法是基于 CSS 的编写样式扩展的，理解起来非常简单。本文只是简单介绍。

1.变量

LESS 中引入的变量其实为常量，一旦被定义后无法修改。通过 @ 符号定义变量，定义后的变量可以在之后的编写中任意引用。举例如下：

@color: #f1f1f1;

.wrap{ color: @color; }

编译后的结果为：

.wrap{ color: #f1f1f1; }

2.混合

LESS 中可以编写类似于函数的语句，可以根据实际情况定制参数。同时也可以简化编写，比如说圆角的 CSS 属性在很多浏览器都没有统一格式的时候可以统一编写“函数”，在需要使用圆角的时候直接饮用。例如：

.round (@radius:5px) {

border-radius:@radius;

-webkit-border-radius:@radius;

-moz-border-radius:@radius;

}

.wrap{ round(10px); }

编译后的 CSS 代码为：

.wrap{

border-radius:10px;

-web-border-radius:10px;

-moz-border-radius:10px;

}

很明显，在.round (@radius:5px){} 函数中，默认的边角弧度是5px，如果不填写就是默认值。

3.套嵌和内嵌

为了更加方便阅读和理顺，LESS 提供了可以套嵌的编写方式，可以避免编写多层 CSS 选择器时出现的错误，举例如下：

#header{

h1{ font-size:24px; }

p{ font-size:12px;

     a{ text-decoration:none;

            &:hover{ border-width:1px;}

        }

   }

}

为了方便阅读，我把不一样的层次染上了颜色。编译后的效果为：

#header h1{ font-size:24px; }

#header p{ font-size:12px; }

#header p a{ text-decoration:none; }

#header p a:hover{ border-width:1px; }

这样看来，LESS 节省编写的效果就非常明显了。

内嵌则是直接在某个样式中直接嵌入其他样式的名称。使用方法是直接在花括号之内写上需要嵌入的样式名称。

4.运算

LESS 支持简单的运算，包括 +、-、*、/，和布尔判断，以及非常丰富的数学函数。可以实现颜色的递增递减或者按比例缩放等等。简单的例子：

@the-border:1px;

#header{ padding-right:@the-border*5; }

编译后的效果如下：

#header{ padding-right:5px; }

总结

只要看过几个例子就可以发现 LESS 的锋利之处——大大简化了开发者的工作量，如果编写的 LESS 合理的话，可以将一个网站的应该统一的样式使用相同的变量，则调试的时候只需要调整变量值就可以观察到效果，对网站的设计也是有非常大的帮助。