正如各位所知道的一样，css是一门标记性语言，语法相对简单，对使用者的要求也比较低 。不过可乐不知道友友们有没有发现，在使用css的时候需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于一些缺乏css编写经验的猿猿来讲，写出组织良好且易于维护的 CSS 代码是相当困难的一件事情。这个时候呢，可乐悄悄地告诉你们，咱们的程序员蜀黍是无所不能的，针对这个调皮的css，专门开发了less语言。那么，就由可乐来细细为你们介绍这一个新朋友吧~~~
一、less简介：
1、less语言是在css的语法基础上，引入了变量，Mixin（混入），运算，以及函数等功能，可以让我们用更少的代码做更多的事情哦！
二、.less引入（两种方式）：
1、客户端使用.less文件：先要从http://lesscss.org下载 less.js 文件，然后在我们需要引入 LESS 源文件的 HTML 中加入如下代码：
<link rel="stylesheet/less" type="text/css" href="styles.less">
注意，此处的rel属性值是“stylesheet/less”哦。
还有一点就是：less源文件一定要在less.js引入之前引入，才能保证less源文件正确编译解析:
<script src="../less.min.js"></script>
2、在服务器端使用：主要是借助于LESS的编译器，将less源文件编译生成最终的css文件（推荐）；
LESS 在服务器端的使用主要是借助于 LESS 的编译器，将 LESS 源文件编译生成最终的 CSS 文件，目前常用的方式是利用 node 的包管理器 (npm) 安装 LESS，安装成功后就可以在 node 环境中对 LESS 源文件进行编译。
在项目开发初期，我们无论采用客户端还是服务器端的用法，我们都需要想办法将我们要用到的 CSS 或 LESS 文件引入到我们的 HTML 页面或是桥接文件中，LESS 提供了一个我们很熟悉的功能— Importing。我们可以通过这个关键字引入我们需要的 .less 或 .css 文件。 如：
@import “variables.less”;
.less 文件也可以省略后缀名，像这样：
@import “variables”;
引入 CSS 同 LESS 文件一样，只是 .css 后缀名不能省略。
三、.less语法简介：
1、变量：一次定义，重复使用：
@color:#505253;
.bg-color{
background-color:@color;
}
.border-color{
border:1px solid @color;
}
如上所示： @color 就是可乐刚刚定义的变量，在 .bg-color 和 .border-color 当中都可以使用它
2、混入--Mixins：申明一个类，然后在其它类中调用当前这个类
.roundeCorers(@radius:5px){
-moz-border-radius:@radius;
-webkit-border-radius:@radius;
border-radius:@radius;
}
#header{
.roundeCorers;
}
#footer{
.roundeCorers(10px);
}
可乐注释一下：其中 @radius 是参数，不穿参数时，默认值为 5px ，如 #header 中的用法。
3.继承
有一个类用了一组样式，又写了一个类也想用这个样式，可继承上个类的样式，如：
基础css样式：
.base-style {
font-size: 12px;
color: red;
}
第一种继承写法：
.content{
.base-style();
background-color: white;
}
第二种继承写法：
.content{
&:extend(.base-style);
background-color: white;
}
两写法不同，编译后生成的CSS样式也不一样
第一种：
.base-style{
font-size: 12px;
color: red;
}
.content {
font-size: 12px;
color: red;
background-color: white;
}
第二种：
.base-style,
.content{
font-size: 12px;
color: red;
}
.content {
background-color: white;
}
4、嵌套规则：
html：
<div id="header">
<h1><a href="">www.xdpie.com</a></h1>
<p>自游自驾</p>
</div>
LESS：
#header {
display: inline;
float: left;
h1 {
font-size: 26px;
font-weight: bold;
a {
text-decoration: none;
color: #f36;
&:hover {
text-decoration: underline;
color: #63f;
}
}
}
p {
font-size: 12px;
}
}
5、功能和操作：
可乐给大家一个网址，供大家参考：
http://less.bootcss.com/functions/
6、逻辑控制：
LESS是用mixin通过guard的方式支持简单图瓦人分支控制，
比如我们要实现一个控制 ::placeholder 样式的 mixin，当传入颜色时只设置颜色，当传入声明块时输出对应的样式规则，其他情况输出一个默认的 color
.mixin(@val) when (iscolor(@val)) {
color: @val;
}
.mixin(@val) when (isruleset(@val)) {
@val();
}
.mixin(@val) when (default()) {
color: #666;
}
可乐提示一下哈：default() in guards acts as else
好啦，对less的主要用法呢，可乐就讲这么多，最后再给一些友情提示，希望对各位博友们有帮助哦~~~
预编译CSS有哪些：
Sass（Scss），Less，Stylus
Sass官网：http://sass-lang.com/ http://www.w3cplus.com/sassguide/
Less官网：http://lesscss.org/ 中文：http://less.bootcss.com/
Stylus文档：http://learnboost.github.io/stylus/
LESS和SCSS对比：https://css-tricks.com/sass-vs-less/
LESS和SCSS分别有哪些项目和书籍可作为参考：
1、Bootstrap 用了LESS
2、sass与compass实战一书 主要讲解了Sass用法