原文地址: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也可以不經編譯,直接在瀏覽器端使用。
使用方法:
- 下載LESSCSS的.js文件,例如lesscss-1.4.0.min.js。
-
在頁面中引入.less文件
<link rel="stylesheet/less" href="example.less" />
需要注意
rel
屬性的值是stylesheet/less
,而不是stylesheet
。 -
引入第1步下載的.js文件
<script src="lesscss-1.4.0.min.js"></script>
需要特別注意的是,由於瀏覽器端使用時是使用ajax來拉取.less文件,因此直接在本機文件系統打開(即地址是file://
開頭)或者是有跨域的情況下會拉取不到.less文件,導致樣式無法生效。
還有一種情況容易導致樣式無法生效,就是部分服務器(以IIS居多)會對未知後綴的文件返回404,導致無法正常讀取.less文件。解決方案是在服務器中爲.less文件配置MIME值爲text/css
(具體方法請搜索)。或者還有一種更簡單的方法,即是直接將.less文件改名爲.css文件即可。