Question

各位看官大家好，从这个章节开始我们将开始一块探索 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 的基础知识，如果你是一位前端初学者，建议您可以先去学习慕课网上面的其他基础教程。

最后推荐几个在线编译的网站帮助各位学习：

• https://tool.oschina.net/less

• http://www.matools.com/less