less 简介
各位看官大家好，从这个章节开始我们将开始一块探索 Less 的优点、语法特性等。希望各位可以通过该教程获取到有用的编程知识！
1. 什么是 Less ？
在我们开始学习之前，我们肯定需要了解 Less 是个什么东西？如果要了解 Less ，那么我们肯定绕不过一个术语 - 预处理语言。
随着我们变成业务的复杂程度提升，原生的编程语言已经渐渐不能满足我们的需求。预处理语言的出现正是针对某些不易维护或繁琐的语言进行预处理，拓展该语言的语法功能。
Less 就是 CSS 的预处理语言之一，为 CSS 拓展了变量、Mixin、函数等特性，使 CSS 更易维护和扩展，使我们可以像写 JS 一样编写 CSS 。我们可以看一段 Less 的代码直观的感受下 Less 的这些特性：
- 输入代码
@base: #f938ab; // 定义变量
// 函数传参及参数校验
.box-shadow(@style, @color) when (iscolor(@color)) {
-webkit-box-shadow: @style @color;
box-shadow: @style @color;
}
.box {
border-color: lighten(@base, 30%); // 内置函数
div {
.box-shadow(0 0 5px, #333) // 调用函数并赋值
}
}
- 输出代码
.box {
border-color: #fdcdea;
}
.box div {
-webkit-box-shadow: 0 0 5px #333;
box-shadow: 0 0 5px #333;
}
上述的代码中我们用到了 Less 的变量、Mixins 等，使得我们的代码更具有逻辑性。
综上所述，Less 就是为了解决 CSS 代码中的痛点所做的拓展，当然你在 Less 中直接写 CSS 也是没有问题的。
2. 为什么选择 Less ？
我们知道了什么是 Less ，各位肯定疑惑为什么我们要选择 Less 哪？毕竟 CSS 的预处理语言有好几种，比如 Sass 、Stylus 等。
在我看来 Less 相比于其他语言有以下几种优点：
- Less 是基于 JS 编译的，所以在 npm 安装速度较快。
- Less 的语法特性更加与 CSS 相似，对刚开始接触的人较为友好。
- Less 便于与主流构建工具结合，可以运行在 Node 端或者浏览器端。
当然相比与 Sass 等也有一些不足之处，不过 CSS 预处理处理语言都有着许多的共通点，学好 Less 后再去学习 Sass 、Stylus 也会事半功倍。
3. less 版本
本教程的 less 版本为编写时版本为 v3.11.1 ，请各位看官按照该版本进行练习。
Less 版本相关更新的内容可以查阅下面的这个地址：
https://github.com/less/less.js/blob/master/CHANGELOG.md
4. 学习准备
在学习之前我希望各位已了解关于 CSS、Html 的基础知识，如果你是一位前端初学者，建议您可以先去学习慕课网上面的其他基础教程。
最后推荐几个在线编译的网站帮助各位学习：