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

2013-08-02 15:44:34来源:我记录作者:

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

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

什么是 less ?

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

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

less 的官方网址是:http://lesscss.org,但好像要翻墙才能访问。但非常幸运,还有一个翻译成中文的网站:http://www.lesscss.net, 内容基本一样(我们这里不感谢党,也不感谢领导,而是感谢做这个网站的朋友)。这个网站就一个页面,一个很长很长的页面,你从头往下看,看完了,也就学完了。

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

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

使用 WinLess 编译

1、到 http://winless.org 下载工具 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 的语法毕竟相对简单,所以一些在线工具可以很轻松的做到。比如 http://less.cnodejs.net http://www.ostools.net/less  一般都有两个框,左侧输入less,右侧呈现编译的 css,方便在线学习和测试。

修改 bootstrap 中的 less

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

\

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

\

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

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

赞助商链接: