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

做者： 風雨後見彩虹

出處： http://www.cnblogs.com/moqiutao/

聲明：若是您以爲本文對您的學習有所幫助，請多關注支持與鼓勵。

正在看本人博客的這位童鞋，我看你氣度不凡，談吐間隱隱有王者之氣，往後必有一番做爲！屏幕右下角有「推薦」二字，若是以爲對你有幫助，你就順手把它點了吧。