LESS簡介

LESSCSS是一種動態樣式語言，屬於CSS預處理語言的一種，它使用類似CSS的語法，為CSS的賦予了動態語言的特性，如變數、繼承、運算、函式等，更方便CSS的編寫和維護。

LESSCSS可以在多種語言、環境中使用，包括瀏覽器端、桌面客戶端、服務端。

快速上手

LESSCSS的使用是很容易的，首先，使用你最常使用的程式碼編輯器，按LESSCSS的語法規則寫好.less檔案，接下來，使用編譯工具它編譯成.css，最後再引入頁面即可。

GUI編譯工具

為方便起見，建議初學者使用GUI編譯工具來編譯.less檔案，以下是一些可選GUI編譯工具：

國人開發的LESSCSS/SASS編譯工具。下載地址：http://koala-app.com/index-zh.html

一款自動編譯Less/Sass/Stylus/CoffeeScript/Jade/Haml的工具，含語法檢查、圖片優化、自動重新整理等附加功能。下載地址http://incident57.com/codekit/

一款LESS編譯軟體。下載地址http://winless.org/

一款LESS編譯軟體。下載地址http://wearekiss.com/simpless

Node.js庫

LESSCSS官方有一款基於Node.js的庫，用於編譯.less檔案。

使用時，首先全域性安裝less（部分系統下可能需要在前面加上sudo切換為超級管理員許可權）：

npm install -g less

接下來就可以使用lessc來編譯.less檔案了：

lessc example/example.less example/example.css

更多選項可以直接執行lessc檢視說明。

瀏覽器端使用

LESSCSS也可以不經編譯，直接在瀏覽器端使用。

使用方法：

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

需要特別注意的是，由於瀏覽器端使用時是使用ajax來拉取.less檔案，因此直接在本機檔案系統開啟（即地址是file://開頭）或者是有跨域的情況下會拉取不到.less檔案，導致樣式無法生效。

還有一種情況容易導致樣式無法生效，就是部分伺服器（以IIS居多）會對未知字尾的檔案返回404，導致無法正常讀取.less檔案。解決方案是在伺服器中為.less檔案配置MIME值為text/css（具體方法請搜尋）。或者還有一種更簡單的方法，即是直接將.less檔案改名為.css檔案即可。

提示：

1.務必確保在 less.js 之前載入你的樣式表。

2.如果載入多個 .less 樣式表檔案，每個檔案都會被單獨編譯。因此，一個檔案中所定義的任何變數、mixin 或名稱空間都無法在其它檔案中訪問。

在 <script src="less.js"></script> 之前定義全域性的 less 物件就可以為 Less.js 設定引數：

<script> less = {

env: “development”,

async: false,

fileAsync: false,

poll: 1000, functions: {},

dumpLineNumbers: “comments”,

relativeUrls: false, rootpath: “:/a.com/” };

</script>

相關文章