从上面可以看出，开发人员已经为一些常用的样式变成变量的形式。并且每一个变量的名字都很具体，只要一看就知道这是要设置什么。那具体是怎样用的呢？我们来看看buttons.less文件，同样是节选部分：
// Base styles // -------------------------------------------------- // Core .btn { display: inline-block; .ie7-inline-block(); padding: 4px 12px; margin-bottom: 0; // For input.btn font-size: @baseFontSize; line-height: @baseLineHeight; text-align: center; vertical-align: middle; cursor: pointer; .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75)); border: 1px solid @btnBorder; *border: 0; // Remove the border to prevent IE7's black border on input:focus border-bottom-color: darken(@btnBorder, 10%); .border-radius(@baseBorderRadius); .ie7-restore-left-whitespace(); // Give IE7 some love .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
怎么样，是不是很方便。妈妈再也不用担心我傻傻写错样式了。上面只是列举了了变量这一特性是使用，当然你还可以在其他文件上发现其他特性的使用。
4、合并编译less文件
文件都写好了，那怎么把它变成bootstrap.css呢。这里有个文件很重要，那就是bootstrap.less。最后只需要编译该文件就可以得到css文件了。我们来看看里面到底写了啥：
// Core variables and mixins @import "variables.less"; // Modify this for custom colors, font-sizes, etc @import "mixins.less"; // CSS Reset @import "reset.less"; // Grid system and page structure @import "scaffolding.less"; @import "grid.less"; @import "layouts.less"; // Base CSS @import "type.less"; @import "code.less"; @import "forms.less"; @import "tables.less"; // Components: common @import "sprites.less"; @import "dropdowns.less"; @import "wells.less"; @import "component-animations.less"; @import "close.less"; // Components: Buttons & Alerts @import "buttons.less"; @import "button-groups.less"; @import "alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less // Components: Nav @import "navs.less"; @import "navbar.less"; @import "breadcrumbs.less"; @import "pagination.less"; @import "pager.less"; // Components: Popovers @import "modals.less"; @import "tooltip.less"; @import "popovers.less"; // Components: Misc @import "thumbnails.less"; @import "media.less"; @import "labels-badges.less"; @import "progress-bars.less"; @import "accordion.less"; @import "carousel.less"; @import "hero-unit.less"; // Utility classes @import "utilities.less"; // Has to be last to override when necessary
bootstrap.less作用是将其他less文件全部引入，但是引入的顺序还是有要求的。比如先引入 variables.less 和 mixins.less，是因为后面的less文件用到的less特性都是来自于这两个文件的，如果不先引入，就会出现编译错误的问题。然后再引入 reset.less 重置原有的样式。接着引入网格系统的相关文件，这是整个网格系统建立的关键所在。然后引入一些公用的组件，特定组件，最后就是一些无家可归但是比较有用的样式样式文件：utilities.less。
最后要做的就是编译bootstrap.less生成bootstrap.css文件。
编译方法：
如果你用的编辑器是 sublime text 安装less2css插件，使用需要nodejs环境，还有一个less的插件（这个你在使用的时候会提醒你缺少某个插件，然后安装就可以了）。
用前面说的gulp工具，已经给出教程了
总结：
通过对bootstrap源码文件的分析，既了解到了less的作用，也明白预处理器流行的原因。其中有很多思想是值得我们学习的。比如编写一个样式框架要考虑哪些因素，如何分工合作等等。
如果你写的页面，样式比较少，不推荐使用less，有点麻烦。当然如果你配置好相关环境了（比如工作中使用gulp或webpack来实现自动化）也就不用在乎了。
如果你要写的样式比较多，推荐使用less。
另外bootstrap官网提供样式定制，如果变动比较小的话，推荐直接修改bootstrap源文件，重新编译就好。
如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：