如何使用lessc编译.less文件

Posted 2023-03-16

LESS ：一种动态样式语言。
LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。
在介绍如何通过 lessc （less源码编译器）把编写好的.less文件生成.css文件之前，非常有必要了解一下Node.JS。
一、初识Node.js
Node.js不是JS应用、而是JS运行平台，负责执行服务器端的javascript代码。事实上，Node.js采用C++语言编写而成，是一个Javascript的运行环境。
Node.js采用了Google Chrome浏览器的V8引擎，性能很好，同时还提供了很多系统级的API，如文件操作、网络编程等。
要想了解更多Node.JS，请参考《深入浅出Node.js》前两篇文章即可
1）.深入浅出Node.js（一）：什么是Node.js
2）.深入浅出Node.js（二）：Node.js&NPM的安装与配置（PS：安装最新版本的Node.JS已默认自带了NPM，无需通过GitHub去安装）
我本机的Node.JS默认安装在D:\\nodejs\\目录下，如图
启动node.js，查看版本
二、安装LESS包
通过npm install -d less命令安装LESS包。
为了将less包安装在nodejs的node_modules目录下，可以先进入d:盘，然后使用该命令
LESS包安装完成后，进入D:\\nodejs\\node_modules\\，该目录下有三个目录，分别为less，npm和.bin（该目录下有lessc编译器），把D:\\nodejs\\node_modules\\.bin添加到环境变量中。
三、编写.less文件并编译它
这是一个简单的测试代码test.less，内容如下
复制代码
@color: #4D926F;
#header
color: @color;

h2
color: @color;

复制代码
该文件位于 E:\\Code\\VS2013\\BootstrapDemo\\LessDemo\\Less\\test.less。
启动node.js控制台，进入test.less文件所在的目录，输入lessc test.less > test.css命令，less文件就会被编译成css文件
打开生成的test.css 文件 参考技术A

　　使用lessc编译.less文件的方法

预备环境 ios开发环境，Mac OS、XCode5.0以上版本； 

下载HBuilder离线打包iOS版SDK（5+ SDK下载）。

 SDK目录说明： HBuilder-Hello：离线打包演示应用；

 Feature-iOS.xls：iOS平台各扩展Feature API对应的库文件列表；