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

【一】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代碼片段,感受下它的魅力:
@url:'../images/';</p> <p>.box-a{
.hd-a{
height: 25px;
background:url('@{url}bg.png');
}
}
編譯后的css文件代碼:
.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文件(你可以配置輸出路徑)
【三】如何在編輯器中,寫(xiě)less有代碼補(bǔ)全提示
以 sublime text編輯器 為例子:需要安裝
重啟后:
【四】版本
Less 的版本,并不是指本身(如jQuery就是需要下載對(duì)應(yīng)的本身版本庫(kù)),而是指編譯工具中的less版本,以考拉軟件為例子:
如圖所示,就是考拉軟件中的less版本,1.6.1
相關(guān)文章
LESS 讓css也支持變量,運(yùn)算符,include,嵌套規(guī)則等等
最近在網(wǎng)上看到1個(gè)很有意思的CSS擴(kuò)展,這里介紹給大家。LESS 最早是1個(gè)ruby的gem,用于擴(kuò)展css的語(yǔ)法,用了LESS后,可以在css中使用變量,運(yùn)算符,include,嵌套規(guī)則等等。2010-07-04less讓css具有動(dòng)態(tài)語(yǔ)言的特性
Less 是一種樣式語(yǔ)言,它將 css 賦予了動(dòng)態(tài)語(yǔ)言的特性,如變量、 繼承、 運(yùn)算、 函數(shù)。less 既可以在客戶(hù)端上運(yùn)行(支持IE 6+, Webkit, Firefox),也可以借助 Node.js 或2012-11-20LESS 讓css也支持變量,運(yùn)算符,include,嵌套規(guī)則
最近在網(wǎng)上看到1個(gè)很有意思的CSS擴(kuò)展,這里介紹給大家。LESS 最早是1個(gè)ruby的gem,用于擴(kuò)展css的語(yǔ)法,用了LESS后,可以在css中使用變量,運(yùn)算符,include,嵌套規(guī)則等等。2010-07-04- less用變量 (variables),引用(mixins),表達(dá)式(operations),嵌套規(guī)則(nested rules)來(lái)擴(kuò)展css開(kāi)發(fā).2009-08-14
學(xué)習(xí)CSS預(yù)處理器:Sass和less進(jìn)行對(duì)比
Css可以讓你做很多事情,但它畢竟是給瀏覽器認(rèn)的東西,對(duì)開(kāi)發(fā)者來(lái)說(shuō),Css缺乏很多特性2012-07-11- 這篇文章主要介紹了Less里css表達(dá)式的寫(xiě)法,需要的朋友可以參考下。修復(fù)IE6的fixed,IE7+已經(jīng)支持了2014-06-18
- 這篇文章主要介紹了瀏覽器端如何使用Less,需要的朋友可以參考下2014-12-10