《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。

相关文章
|
6月前
|
存储 前端开发 JavaScript
|
6月前
|
前端开发 JavaScript
Javascript知识【BootStrap技术实现商品页面】(下)
Javascript知识【BootStrap技术实现商品页面】
|
8月前
|
JavaScript 前端开发 Java
|
前端开发 开发者 容器
Bootstrap- 响应式工具|学习笔记
快速学习 Bootstrap- 响应式工具
116 0
Bootstrap- 响应式工具|学习笔记
|
10月前
|
前端开发 JavaScript 开发者
前端封装库/工具库的UI框架之Bootstrap
随着互联网时代的到来,对于Web应用的UI设计和开发变得越来越重要。而为了更高效地进行UI开发,前端封装库/工具库的出现成为了一个非常好的解决方案。其中一个颇受欢迎的UI框架就是Bootstrap。
121 0
|
JSON 前端开发 JavaScript
地图集web项目_技术学习(二)_bootstrap分页的例子
地图集web项目_技术学习(二)_bootstrap分页的例子
110 0
|
前端开发
bootstrap 原理以及使用方式
bootstrap 原理以及使用方式
|
前端开发
bootstrap 组件之分页 提示框 提示工具组件
bootstrap 组件之分页 提示框 提示工具组件
|
前端开发 JavaScript
bootstrap简介 原理
字体的大小要使用rem, em作为单位, rem是根节点字体的相对大小,是一个相对单位,不是一个绝对单位, 根节点的大小需要使用根据的用户的屏幕尺寸来动态计算font-size的大小
|
JavaScript 前端开发 NoSQL
基于springboot+mysql+redis+bootstrap的精美个人技术博客网站
基于springboot+mysql+redis+bootstrap的精美个人技术博客网站
127 0
基于springboot+mysql+redis+bootstrap的精美个人技术博客网站