《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
Web前端之移动端课程开发之06.bootstrap
Web前端之移动端课程开发之06.bootstrap
73 0
|
存储 前端开发 JavaScript
|
19天前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
29 3
|
2月前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
27 2
|
4月前
|
开发框架 前端开发 JavaScript
在Bootstrap开发框架基础上增加WebApi+Vue&Element的前端
在Bootstrap开发框架基础上增加WebApi+Vue&Element的前端
|
3月前
|
存储 JavaScript 前端开发
【Vue.js的神秘力量】一键解锁:如何让Bootstrap和Vuex成为你的开发超能力?
【8月更文挑战第30天】Vue.js是一个轻量且灵活的JavaScript框架,易于上手且功能强大。为提高开发效率和应用交互性,常需集成第三方库。本文介绍如何在Vue.js项目中集成Bootstrap和Vuex,及其它常见第三方库。Bootstrap提供响应式设计和预制组件,通过安装插件和引入CSS/JS即可集成;Vuex作为官方状态管理库,通过安装并创建store来管理组件状态。此外,Vue.js还可轻松集成Axios和Vue Router等库,提升HTTP请求和页面路由功能。合理选择和集成第三方库能显著提升开发效率,但需保持代码可维护性和可读性。
33 0
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面
循序渐进BootstrapVue,开发公司门户网站(1)---基于Bootstrap网站模板构建组件界面
|
6月前
|
编解码 前端开发 JavaScript
BootStrap 响应式布局技术教程简介
BootStrap 响应式布局技术教程简介
137 1
|
前端开发 开发者 容器
Bootstrap- 响应式工具|学习笔记
快速学习 Bootstrap- 响应式工具
144 0
Bootstrap- 响应式工具|学习笔记
|
前端开发 JavaScript
Javascript知识【BootStrap技术实现商品页面】(下)
Javascript知识【BootStrap技术实现商品页面】

热门文章

最新文章

下一篇
无影云桌面