less及編譯工具介紹

什么是LESSCSS

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

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

語言特性快速預覽：

變量：

變量允許我們單獨定義一系列通用的樣式，然后在需要的時候去調用。所以在做全局樣式調整的時候我們可能只需要修改幾行代碼就可以了。

LESS源碼：

@color: #4D926F;

#header {
    color: @color;
}
h2 {
    color: @color;
}

編譯后的CSS：

#header {
    color: #4D926F;
}
h2 {
    color: #4D926F;
}

混合（Mixins）

混合可以將一個定義好的class A輕松的引入到另一個class B中，從而簡單實現class B繼承class A中的所有屬性。我們還可以帶參數地調用，就像使用函數一樣。

LESS源碼：

.rounded-corners (@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -ms-border-radius: @radius;
    -o-border-radius: @radius;
    border-radius: @radius;
}

#header {
    .rounded-corners;
}
#footer {
    .rounded-corners(10px);
}

編譯后的CSS：

#header {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}
#footer {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

嵌套

我們可以在一個選擇器中嵌套另一個選擇器來實現繼承，這樣很大程度減少了代碼量，並且代碼看起來更加的清晰。

LESS源碼：

#header {
    h1 {
        font-size: 26px;
        font-weight: bold;
    }
    p {
        font-size: 12px;
        a {
            text-decoration: none;
            &:hover {
                border-width: 1px
            }
        }
    }
}

編譯后的CSS：

#header h1 {
    font-size: 26px;
    font-weight: bold;
}
#header p {
    font-size: 12px;
}
#header p a {
    text-decoration: none;
}
#header p a:hover {
    border-width: 1px;
}

函數和運算

運算提供了加，減，乘，除操作；我們可以做屬性值和顏色的運算，這樣就可以實現屬性值之間的復雜關系。LESS中的函數一一映射了JavaScript代碼，如果你願意的話可以操作屬性值。

LESS源碼：

the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
    color: (@base-color * 3);
    border-left: @the-border;
    border-right: (@the-border * 2);
}
#footer {
    color: (@base-color + #003300);
    border-color: desaturate(@red, 10%);
}

編譯后的CSS：

#header {
    color: #333;
    border-left: 1px;
    border-right: 2px;
}
#footer {
    color: #114411;
    border-color: #7d2717;
}

更多說明

更多更詳細的語法特性請參見語言文檔

快速上手

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

GUI編譯工具

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

1.koala(Win/Mac/Linux)

國人開發的LESSCSS/SASS編譯工具。下載地址：http://koala-app.com/index-zh.html，如果無效，可以點擊此處百度雲盤下載。

選擇koala的7大理由：

1. 多語言支持：支持Less、Sass、CoffeeScript 和 Compass Framework。
2. 實時編譯：監聽文件，當文件改變時自動執行編譯，這一切都在后台運行，無需人工操作。
3. 編譯選項：既可統一設置文件的編譯選項，也可單獨設置某個文件的編譯選項。
4. 強大的文件右鍵功能：右鍵文件元素，即可操作打開文件，打開文件目錄，打開輸出文件目錄，設置輸出文件目錄，編譯，刪除六大常用功能。
5. 錯誤提示：在編譯時如果遇到語法的錯誤，koala將在右下角彈出錯誤信息，方便開發者定位代碼錯誤位置。
6. 跨平台：windows、linux、mac都能完美運行。
7. 免費且負責：koala完全免費，而且作者很負責，有什么問題作者都會及時給予答復，意見什么的可以直接提交給作者，一般在下一個版本就能得到解決。

了解了它的優點之后，我們來熟悉下它的界面，這個其實也是我選擇它的一個原因。

簡潔美觀的面板

 

上面四個數字分別對應四個區域：

第一區域：第一個按鈕用於添加項目，第二個按鈕打開編譯文件的錯誤提示，第三個按鈕設置koala，里面可以設置所有文件默認的編譯輸出方式，需要過濾的文件，界面語言（中文/英文）等。當然這里也包括目前koala的版本號及作者等信息。

第二區域：project區域，可以直接把項目拖進該區域

第三區域：需編譯的文件列表，默認以下划線開頭的文件不出現列表中，綠色表示動態編譯的文件，灰色表示非動態編譯。單擊相應的文件，出現第四個區 塊，設置文件編譯的選項。如果你的文件是后添加的那么請點擊上面的refresh按鈕刷新需要編譯的文件，當然也可以通過下面的幾個all/less /sass/coffee來過濾自己要編譯的文件。

第四區域：設置文件編譯的選項，這個區域得選中第三個區域的某個需要編譯的文件才會出現。以sass為例，第一個選項表示是否啟用動態編譯；第二組 表示是否啟用這四個功能，我這邊為了方便調試所以啟用debug info，當然如果你使用compass那就得啟用compass；第三組表示輸出的css格式，分為四 種：nested，compressed，compact，expanded；最后一個compile按鈕可以手動編譯。

既然熟悉了界面，我們就實際使用下吧，步驟走起：

簡單的使用步驟

第一步：首先點擊我們第一區域的那個齒輪按鈕，設置下默認文件的編譯方式，並把界面語言設置為中文。

第二步：添加我們要編譯的項目文件，可通過第一區域的加號那個按鈕添加，也可以直接將項目拖到第二個project區域。

第三步：單擊我們需要編譯的文件，出現第四區域設置下該文件具體的編譯方式，如果沒什么特別的，直接用默認設置的就ok，如果不需要動態編譯，直接勾掉“即時編譯”那個checkbox，其余的按照上面說的操作。

第四步：右鍵單擊需要編譯的文件，出現我們常用的幾個操作：打開文件，打開文件目錄，打開輸出文件目錄，設置輸出文件目錄，編譯，刪除。一般這里我們需要設置下我們輸出文件的目錄。

第五步：如果你的文件既有less，sass還有coffee，那么就最好有必須點擊下面的過濾條件，選擇你要動態編譯的文件，不然一鍋煮頭都大了。

 

 

2.Codekit(Mac)

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

3.WinLess(Win)

一款LESS編譯軟件。下載地址http://winless.org/，如果無效，點擊這兒百度雲盤下載。

winless使用步驟：

a.下載工具 WinLess，然后點擊安裝.

b.建立一個文件夾，比如 MyLessTest，並在其中建立子文件夾 less 和 css

    MyLessTest
        --less
        --css

c.打開 WinLess，如下圖，點擊 Add folder 按鈕，將剛才建立的 MyLessTest 添加進去（注意：不是添加 less 文件夾，而是它的上層目錄 MyLessTest，方便將結果輸出到 less 的同級目錄 css）

d.WinLess 右側會出現所有的 less 文件（如果沒有出現，請點擊“Refresh”按鈕進行刷新），以及輸出的路徑(output file)。

e.選中需要編譯的文件，比如 “bootstrap.less”（注意：請不要全選，在這里，其他一些文件只是被 bootstrap.less 引用而已），點擊 “Compile” 按鈕開始編譯。然后，請打開 less 的同級目錄 css 查看結果。

4.SimpleLess(Win/Mac/Linux)

一款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也可以不經編譯，直接在瀏覽器端使用。

使用方法：

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文件即可。

參考地址：http://www.1024i.com/demo/less/

http://www.cnblogs.com/mrhgw/p/4535429.html