《Bootstrap开发精解:原理、技术、工具及最佳实践》一2.7 编译LESS文件-阿里云开发者社区

开发者社区> 华章出版社> 正文

《Bootstrap开发精解:原理、技术、工具及最佳实践》一2.7 编译LESS文件

简介:

本节书摘来自华章出版社《Bootstrap开发精解:原理、技术、工具及最佳实践》一书中的第2章,第2.7节,作者[美] 亚拉文·谢诺伊(Aravind Shenoy)乌尔里希·索松(Ulrich Sossou),更多章节内容可以访问云栖社区“华章计算机”公众号查看

2.7 编译LESS文件

我们可以用两种不同的方法编译Bootstrap文件,既可以使用SimpLESS或WinLess这样的GUI(图形用户界面)程序编译LESS文件,也可以根据自己的喜好通过命令行的方式编译。

2.7.1 使用SimpLESS编译LESS文件

SimpLESS是由KISS(德国的一个机构)开发的产品,我们可以通过它的官方网站(http://wearekiss.com/simpless)下载。它是一个多平台的工具,可以在Windows、Mac和Linux平台上使用。
安装了SimpLESS之后,可以看到如图2-12所示的界面。

image

我们要把bootstrap.less文件从less文件夹拖放到SimpLESS中。SimpLESS提供了即时编译功能,也就是说只要我们修改并保存LESS文件,它就会自动地把文件编译成bootstrap.css。SimpLESS还包含了许多强大的特性,比如代码压缩、即时通知和自动的LESS更新程序。

2.7.2 使用WinLess编译LESS文件

WinLess是一个Windows平台上的GUI工具,可以将LESS转换为CSS。我们可以在WinLess的官方网站(http://winless.org)上下载这一工具,如图2-13所示。

image

下载好这个工具之后,我们需要打开安装程序并单击Run(运行)按钮,工具运行之后将会出现如图2-14所示界面。
image

在如图2-14的界面中,我们可以添加包含LESS文件的文件夹或者把需要的文件夹拖放到文件夹面板中。单击Compile(编译)按钮,LESS到CSS的转换就会开始执行。我们只需要单击Refresh folder(刷新文件夹)按钮,就可以看到文件夹中的变化。
在本章,我们将使用WinLess工具将Less文件转换为CSS。

2.7.3 使用命令行编译LESS文件

我们也可以使用命令行,通过NPM(Node包管理器)命令来编译LESS。当我们在计算机上安装Node.js的时候,NPM会被同时安装。我们可以通过Node.js的官方网站(http://nodejs.org/download/)下载它的最新版本。
运行如下命令可以安装LESS:
image

安装了LESS之后,我们可以用下面的命令来使用它:
image

要生成CSS文件的压缩版,可以在前面命令的基础上加上--yui-compress选项:
image

如果想让文件在被修改时自动编译,我们也可以使用监视选项-w。

版权声明:如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:developerteam@list.alibaba-inc.com 进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:

华章出版社

官方博客
官网链接