使用WinLess将bootstrap的LESS编译成css的教程

写 css 有多种方式，最简单的做法是打开记事本，一行一行的直接手写。嗯，我就这么写了好多年。当然编辑器不一定用记事本，可以用 notpad++ 或 vim、或 dreamweaver、或其他……

什么是 less ?

如果你写的 css 足够多，就会发现有些地方是重复的。比如你希望页面头部宽度 width 是960px，中间也是 960px，页脚也是 960px，你知道它们是一样的，但不得不重复……如果你是程序员，肯定希望在 css 的语法中，要是有一个变量该多好！比如，我定义一个宽度的变量 @width:960px，然后在所有需要设置页面宽度的地方，都填上 @width，既省了时间，也避免了错误，还方便以后一次修改，全部生效。

less 就是这样一个 css 的增强语法系统。其实所有语法加起来，应该挺简单的，前提是你熟悉 css。如果你对 css 很陌生，那还是先熟悉 css 再说。

现在，请允许我假设，你花10分钟大致看完 less 语法。所以，这篇文章将不再讨论如何写 less 的话题，而是其他事情——

当你用 less 这种增强型的语法写完 css 之后，需要将一堆变量转成实际的 css 代码，因为浏览器并不支持 less（要是浏览器能够默认支持该多好！）。这种将 less 代码转成 css 的过程，我们叫做“编译”。编译工具很多，下面我们谈在 windows 下最简单的做法（我尝试了很多种工具，下面这种是最简单的）。

使用 WinLess 编译

1、下载工具 WinLess，然后点击安装。

2、建立一个文件夹，比如 MyLessTest，并在其中建立子文件夹 less 和 css

    MyLessTest
        --less
        --css

3、打开 WinLess，如下图，点击 Add folder 按钮，将刚才建立的 MyLessTest 添加进去（注意：不是添加 less 文件夹，而是它的上层目录 MyLessTest，方便将结果输出到 less 的同级目录 css）

4、WinLess 右侧会出现所有的 less 文件（如果没有出现，请点击“Refresh”按钮进行刷新），以及输出的路径(output file)。

5、选中需要编译的文件，比如 “bootstrap.less”（注意：请不要全选，在这里，其他一些文件只是被 bootstrap.less 引用而已），点击 “Compile” 按钮开始编译。然后，请打开 less 的同级目录 css 查看结果。

到此为止，编译过程全部完成。

题外话：为什么使用 less ？因为我们在 wojilu 框架中使用了 bootstrap 这个UI框架，而 bootstrap 的 css 是使用 less 写的。所以，学习 less 就成了必须的任务。

在线编译

因为 less 的语法毕竟相对简单，所以一些在线工具可以很轻松的做到。 一般都有两个框，左侧输入less，右侧呈现编译的 css，方便在线学习和测试。

修改 bootstrap 中的 less

如下图，入口文件是 bootstrap.less 和 responsive.less 文件——

这个入口文件 bootstrap.less 是这样引用其他 less 文件的：

了解这份 less 的内容很有必要。通过这个入口文件，逐步了解 bootstrap 的全部内容，才能更加方便的自定义它。

比如，如果要修改每栏 column 的宽度，可以打开 variables.less ，修改其中的 @gridColumnWidth 变量的值。