less開(kāi)發(fā)指南

發(fā)布時(shí)間：2014-04-22 15:16:49 作者：佚名

LESS（是.less后綴名的文件）包含一套自定義的語(yǔ)法及一個(gè)解析器，我們根據(jù)這些語(yǔ)法定義自己的樣式規(guī)則,為 CSS 加入程序式語(yǔ)言的特性，如變量、繼承、運(yùn)算、嵌套等，更方便CSS的編寫(xiě)和維護(hù)

【一】less簡(jiǎn)介

LESS（是.less后綴名的文件）包含一套自定義的語(yǔ)法及一個(gè)解析器，我們根據(jù)這些語(yǔ)法定義自己的樣式規(guī)則，這些規(guī)則最終會(huì)通過(guò)解析器，編譯生成對(duì)應(yīng)的 CSS 文件。LESS 并沒(méi)有裁剪 CSS 原有的特性，更不是用來(lái)取代 CSS 的，而是在現(xiàn)有 CSS 語(yǔ)法的基礎(chǔ)上，為 CSS 加入程序式語(yǔ)言的特性，如變量、繼承、運(yùn)算、嵌套等，更方便CSS的編寫(xiě)和維護(hù)。

先看下段less代碼片段，感受下它的魅力：　

復(fù)制代碼

代碼如下:

@url:'../images/';</p> <p>.box-a{
.hd-a{
height: 25px;
background:url('@{url}bg.png');
}
}

編譯后的css文件代碼：

復(fù)制代碼

代碼如下:

.box-a .hd-a {
height: 25px;
background: url('../images/bg.png');
}

在上面的less代碼中，我們看到了css語(yǔ)法的縮影（選擇器，屬性的寫(xiě)法），LESS 并沒(méi)有裁剪 CSS 原有的特性，更不是用來(lái)取代 CSS 的，而是在現(xiàn)有 CSS 語(yǔ)法的基礎(chǔ)上，為 CSS 加入程序式語(yǔ)言的特性。我們?cè)谇岸隧?yè)面開(kāi)發(fā)時(shí)依然引入css文件地址，而less文件則是你維護(hù)的代碼文件，這過(guò)程中，我們只是多了一個(gè)步驟 -- 編譯

【二】編譯方案

目前將less編譯為css的插件或軟件很多，如gruntjs ，nodejs等等，而這里介紹的是考拉編譯軟件

打開(kāi)此軟件，將.less文件拖進(jìn)去，而你只需要在編輯器中保存less文件（考拉支持實(shí)時(shí)監(jiān)控編譯），考拉默認(rèn)就在該目錄生成一份同名的css文件（你可以配置輸出路徑）