LESS 快速使用入门指南简介
Less CSS 是一个使用广泛的 CSS 预处理器，通过简单的语法和变量对 CSS 进行扩展，可减少很多 CSS 的代码量。
LESS 将 CSS 赋予了动态语言的特性，如 变量、 继承、运算、函数等，LESS 既可以在客户端上运行，支持IE 6+、Webkit、Firefox，也可一在服务端运行借助 Node.js。
关于Less
一直以来，都是使用JS扩展的比较多还没有使用过CSS的扩展，最近看到一个CSS的扩展叫做LESS；LESS最早是1个ruby的gem，用于扩展css的语法，前段时间出来了一个JS版的，看看先。
使用方法
1、下载JS https://github.com/less/less.js 现在最新版本好像是 3.9.0
2、使用 Less，CSS 文件的后缀名需要改为.less。
3、在 HTML 页面中加入下面代码
LESS.less 文件就是样式表文件，并且 LESS.less 必须放在 less.min.js 文件前加载并且 Type 一定要是 text/less，切记是一定！
<link type="text/less" rel="stylesheet/less" rev="stylesheet/less" href="LESS.less" /> <script src="less.min.js"></script>
值得注意的是 link 的 type 属性必须要是 text/less，之前用习惯了 text/css 结果死活就是没有效果。
HTML 的基本代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>LESS CSS</title>
<link type="text/less" rel="stylesheet/less" rev="stylesheet/less" href="LESS.less" />
<script src="less.min.js"></script>
</head>
<body>
<div class="div1">TEST1...</div>
<div class="div2">TEST2...</div>
<div class="div3">TEST3...</div>
<div class="div4">
<div>
<span>SPAN</span>
</div>
<span>SPAN</span>
</div>
<div class="div5">TEST5...</div>
<div class="div6">TEST6...</div>
</body>
</html>
后面的样式都是在那个 LESS.less 文件中所定义。
Less 语法介绍
1、定义变量
@colors:#333;
.div1{
color:@colors;
font-weight:bold;
background-color:#CCC;
}
这样就可以实现：当需要修改颜色的时候只需要修改一处即可。
2、样式内嵌
.div3{
border:#222 solid 1px;
.div1
}
这样可以直接嵌入.div1的样式而无须复制代码了。
3、嵌套规则
@fonts:12px;
.div4{
border:#333 solid 1px;
padding:10px;
div{
background-color:red;
span{
color:red;
}
}
span{
background-color:@colors;
font-size:@fonts * 2;
}
}
这样可以使样式的名称更为的简短，并且修改的时候好找一些，因为都在一块嘛。
4、样式运算
代码见嵌套规则代码中的最后一个 span 标签的 font-size 属性，好处类似于定义变量的好处。
5、样式传参
.div5(@widths:5px){
color:red;
border-style:solid;
border-color:@colors;
border-width:@widths;
}
.div6{
.div5(10px);
}
这个的好处就不言而喻了，像编程一样编写我们 CSS 代码，个人最喜欢这样的方式。
LESS 官方网站：http://lesscss.org/
LESS 原理
LESS JS 版本的是使用 ajax 获取 LESS.less 文件，然后根据该文件中所定义的规则生成最终浏览器能理解的 CSS，然后再将其插入到 HTML 代码中。所以就出现前面说过的 <link rel="stylesheet/less" href="LESS.less" /> 必须在 JS 前面。
PS：可能是因为安全限制的原因，IE 和 Chrome 无法查看到 LESS 的效果的（报的是 HTTP404 错误），必要的话，大家可以用 IIS 或者是 FireFox、Opera、Safari 来浏览。
基于 LESS JS 版本的实现原理，是每次请求都需要通过 JS 去动态生成原始的 CSS，那么如果 CSS 比较大的话，对于客户端的性能影响比较大，所以个人觉的 LESS 的 JS 版本实用性不强。
from：https://www.wenjiangs.com/article/less-quick-start.html
