[LESS] 在windows下编译*.less

原文地址：http://www.dotblogs.com.tw/ajun/archive/2012/07/20/73519.aspx?fid=42162

这篇不介绍 LESS 是甚么,只记录一下怎么准备在 windows 下用 command-line 编译 *.less 的环境.

安装 node.js

直接从 node.js 网站下载msi安装档后执行安装即可.

透过 npm 安装 less

npm是node.js的packagemanaer,安装完 node.js 后就会这程序可以用.

所以只要透过npm安装less这个package就可以了.

首先执行node.js command prompt,在开启的command窗口下执行

 

npm install less -g

 

LESS官方网站上说明是是直接使用 npminstall less,不过为了方便使用lessc,

所以建议加上-g, 将它安装成global package

执行完指令后,就等它跑完就可以使用lessc了

使用 lessc 编译*.less

在node.js command prompt的窗口下先切换到你要编译的 *.less 档案目录下,

然后执行下面指令

 

lessc filename.less > filename.css //非压缩

lessc filename.less >filename.css -x //压缩

执行完后,指定的css档就会产生在所在的目录下

另：

浏览器端使用

LESSCSS也可以不经编译，直接在浏览器端使用。

使用方法：

1. 下载LESSCSS的.js文件，例如lesscss-1.4.0.min.js。

2. 在页面中引入.less文件

   <link rel="stylesheet/less" href="example.less" />

   需要注意rel属性的值是stylesheet/less，而不是stylesheet。

3. 引入第1步下载的.js文件

   <script src="lesscss-1.4.0.min.js"></script>

需要特别注意的是，由于浏览器端使用时是使用ajax来拉取.less文件，因此直接在本机文件系统打开（即地址是file://开头）或者是有跨域的情况下会拉取不到.less文件，导致样式无法生效。

还有一种情况容易导致样式无法生效，就是部分服务器（以IIS居多）会对未知后缀的文件返回404，导致无法正常读取.less文件。解决方案是在服务器中为.less文件配置MIME值为text/css（具体方法请搜索）。或者还有一种更简单的方法，即是直接将.less文件改名为.css文件即可。