PS:本节基于bootstrap v3.0.2，这个版本在GitHub上的介绍和下载地址为：https://github.com/twbs/bootstrap/releases/tag/v3.0.2
PS:当前的最新版本是： v4.0.0-alpha.4
本节会介绍创建创建、编辑、顶置一些LESS文件，以便为我们的设计生成期望的CSS。
□ LESS 文档：
□ Sitepoint 网站关于 LESS 的完整介绍：https://www.sitepoint.com/a-comprehensive-introduction-to-less/
简而言之，使用LESS预处理器来生成CSS是一件既令人激动又十分轻松的事。
6.1 嵌套规则
嵌套规则极大提高了组合样式的效率。比如，CSS中的选择符可能会多次重复出现：
.navbar-nav {...} .navbar-nav > li {...} .navbar-nav > li > a {...} .navbar-nav > li > a:hover, .navbar-nav > li > a:focus {...}
其中这些相同的选择符用LESS写会简洁很多，只要使用一个简单的嵌套即可：
.navbar-nav { ... > li { ... > a { ... &:hover, &:focus { ... } } } }
编译后，这些规则会生成标准的CSS。但 LESS的嵌套规则更容易写，也更容易维护。
6.2 变量
使用变量可以让我们只设定（或修改）一次，就能自动影响（更新）整个样式表中用到该值的属性。比如，可以像下面这样使用颜色变量：
@off-white: #e5e5e5; @brand-primary: #890000;
在这些变量的值变化后，可以自动将它们更新到整个站点。这是因为我们在LESS文件中使用了这些变量：
a { color:@brand-primary; } .navbar { background-color:@brand-primary; > li > a { color:@off-white;} }
6.3 混入
混入可以让生成整套规则更方便也容易管理。比如，可以利用它简化为元素应用border-box 属性的任务。在CSS中，要涵盖所有浏览器，需要用到每种浏览器的供应商前缀，为此针对每个元素都要写三行相同的声明，而且还要记住每一种前缀的写法：
.box{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
在LESS 中，可以只写一个供混入的规则，后面则可以通过 @boxmodel 参数来指定期望的盒模型：
.box-sizing(@boxmodel){ -webkit-box-sizing:@boxmodel; -moz-box-sizing:@boxmodel; box-sizing:@boxmodel; }
然后就可以在需要的地方使用这个混入了：
.box { .box-sizing(border-box); } .another-element { .box-sizing(border-box); }
编译后，还会为每个元素生成三行CSS 。
6.4 运算式
通过运算式可以基于变量实现数学计算。比如，可以将一种颜色作为基准，对其进行加亮和减暗处理：
复制代码 代码如下:
a:hover { darken(@link-color, 15%); }
还可以计算内边距的值，以适应导航条的高度。比如，以下Bootstrap 的 navbar.less 文件中的代码，就将导航项的内边距值设为导航条高度减去行高之后剩余的高度值。然后，把这个值一分为二，平均应用为顶部和底部内边距:
.navbar > li > a { padding-top：((@navbar-height - @line-height-computed) / 2); padding-bottom：((@navbar-height - @line-height-computed) / 2); }
6.5 导入文件
LESS 编译器支持导入并组合多个文件，最终生成一个统一的CSS文件。我们可以指定导入的次序，按照需要的层叠关系精确组织结果样式表。
Bootstrap 的导入文件 bootstrap.less 一开始导入了基本的变量和混入。然后，又导入了（代替CSS 重置样式表的） normalize.css 的LESS 版，之后是针对打印媒体的基本样式（print.css）、基本的全局样式（scaffolding.less）和排版样式（type.less）。结果这个bootstrap.less 文件的开头几行就是这样的：
// Core variables and mixins @import "variables.less"; @import "mixins.less"; // Reset @import "normalize.less"; @import "print.less"; // Core CSS @import "scaffolding.less"; @import "type.less";
而最终得到的是一个统一的CSS文件，其中的样式经过从一般到特殊的层叠，正是我们想要的。
6.5 模块化
把多个文件导入并输出成一个文件，可以让我们更方便地组织样式，对它们进行分组，并在不同的文件中对它们进行维护。这也是Bootstrap会带有那么多LESS文件的原因，导航条有一个、按钮有一个、警告框有一个、传送带有一个... ，而所有这些都会被导入到 bootstrap.less 文件。
正因为上述原因，LESS及其他 CSS预编译器才会变得如此流行。
7.根据需要定制Bootstrap的LESS文件
在定制Bootstrap的LESS文件期间，我们会发挥很大的主观能动性，具体如下：
□ 组织less文件夹，以便灵活、自由地实现我们需要，同时也让将来的维护者更方便；
□ 自定义Bootstrap提供的几个LESS文件；
□ 创建几个新的LESS文件；
□ 为站点整合一套较大的字体图标，数量翻倍，并将图标运用于社交媒体链接。
换句话说，我们不光要学习Bootstrap的约定，还要发挥自己的创造力。
为了方便起见，我们把原less文件夹下的less文件，即Bootstrap 的LESS文件移到其文件夹bootstrap 下。
