0、前言
Less是一个动态样式语言，赋予了CSS动态语言的特性，学习Less是容易的。
在开发时一般编写.less文件，用link标签引入并设置rel为stylesheet/less，然后在其下用script标签引入less.js文件。
less.js文件（点击进去，右键另存为即可~）
需要注意的是，link 标签一定要在 Less.js 之前引入，并且 link 标签的 rel 属性要设置为stylesheet/less。
在生产阶段，一般用npm下载Less工具包，将.less文件转换成.css文件。
开发阶段这样用：
<!-- html中 -->
<link href="../less/study.less" rel="stylesheet/less" />
<script src="../js/less.min.js"></script>
在生产阶段时，要先将.less文件转成.css文件（主要是为了性能，当然不转也是可以的。）
// 在命令行工具中（首先要安装npm，或者是安装有Node环境，因为Node环境中默认带有npm了）
npm install less -g //如果已经安装过了就略过这一条命令
cd xxx // 进入你的.less文件目录
lessc study.less study.css // 这样就转换成功了
看一下.less的内容和转换后的.css内容
// .less文件内容
@nice-blue: #5B83AD;
@hover-color: yellow;
@div-padding: 20px;
@border-color: seagreen;
.border{
border-top: solid 2px @border-color;
border-bottom: solid 2px @border-color;
}
.div1{
background-color: @nice-blue;
padding: @div-padding;
.border;
&:hover{
background-color: @hover-color;
cursor: pointer;
}
}
// .css文件内容（转换出来的文件）
.border {
border-top: solid 2px seagreen;
border-bottom: solid 2px seagreen;
}
.div1 {
background-color: #5B83AD;
padding: 20px;
border-top: solid 2px seagreen;
border-bottom: solid 2px seagreen;
}
.div1:hover {
background-color: yellow;
cursor: pointer;
}
下面简单讲述Less中的一些特性。
1、变量
变量的好处是显而易见的，例如多处用到同一个颜色值等。想必微调的时候基本都会有四处找对应选择器的经历，麻烦而且容易出错。
less用变量就轻松解决了这个问题。
在less中，用@name: 20px;其中@name表示声明变量，20px则是它的值，用到的时候写@name，到时候less.js会进行转换。看如下代码：
// less内容（注意，变量值可以是颜色值，单位值，字符串url等）
@border-color: seagreen;
.border{
border-top: solid 2px @border-color;
border-bottom: solid 2px @border-color;
}
// 实际转换内容
.border {
border-top: solid 2px seagreen;
border-bottom: solid 2px seagreen;
}
2、混合（混入）
混合（或者说是混入，以下称混合），就是类似组件的东西，可以定义最小的样式，然后在其他地方多次引用（去掉了很多重复的劳动）。
<!-- html文件 -->
<div class="div1"> 我是学习Less的div </div>
// less内容（注意看 引用 .border的地方）
@border-color: seagreen;
.border{
border-top: solid 2px @border-color;
border-bottom: solid 2px @border-color;
}
.div1{
background-color: @nice-blue;
padding: @div-padding;
.border; // 这部分就是混合的内容!! 也可以用.border(); 这样子来表示。
}
// 实际转换内容
.border {
border-top: solid 2px seagreen;
border-bottom: solid 2px seagreen;
}
.div1 {
background-color: #5B83AD;
padding: 20px;
border-top: solid 2px seagreen;
border-bottom: solid 2px seagreen;
}
3、嵌套
嵌套则是用类似html的组织树的形式编写样式代码，使代码看起来立体，一目了然。
// 假设有以下css代码
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
// 则他们可以像这样写
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
// 又比如像本文开始部分写的代码
// 当前元素的伪类则用&连接。
.div1{
...
&:hover{
background-color: @hover-color;
cursor: pointer;
}
}
// 最终转换成
.div1 {
...
}
.div1:hover {
background-color: yellow;
cursor: pointer;
}
4、运算
即可以进行简单的四则运算，和css中的calc()函数相应的能力，可以运算单位和颜色等。（总体来说，还是尽可能进行显示转换单位后进行计算，以防止不必要的错误产生。）
// 换算单位
// numbers are converted into the same units（数字会被转换成相应的单位再继续计算）
@conversion-1: 5cm + 10mm; // result is 6cm
@conversion-2: 2 - 3cm - 5mm; // result is -1.5cm （这里的2会被转成2cm后在进行计算）
// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // result is 4px（这里的2会被转成2px，3cm会被转成3px后在进行计算）
// example with variables
@base: 5%;
@filler: @base * 2; // result is 10%
@other: @base + @filler; // result is 15%
// 换算颜色
@color: #224488 / 2; //results in #112244
background-color: #112244 + #111; // result is #223355
5、内置函数
less中内置了许多的函数，用于处理颜色、字符串、数学运算、类型转换等，这部分内容感兴趣的可以看看。
6、命名空间和访问器
有时候可能需要将所有的 混合 代码组织起来，以便于维护和后续的重用分发。less中提供了这样的功能（不要和css的命名空间搞混了）
#bundle {
.button {
display: block;
border: 1px solid black;
background-color: grey;
&:hover {
background-color: white
}
}
.tab { ... }
.citation { ... }
}
现在我们只用其中的一部分
#header a {
color: orange;
#bundle > .button;
}
7、Maps
不太好组织语言，先略过。
8、作用域
和js的作用域一样，即内部的变量可以覆盖全局变量；或者是相同的变量，后面的值会覆盖前面声明的。
less内容
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
9、注释
分为多行注释和单行注释，很好理解。
10、导入（官方解释）
“导入”的工作方式和你预期的一样。你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉：
@import "library"; // library.less
@import "typo.css";
11、总结
总体来说，less给css添加了许多很实用的功能，是个值得学习的工具，而且它的学习成本很低，就酱。
