CSS less優(yōu)化
發(fā)布時間:2009-08-14 02:23:06 作者:佚名
我要評論

less用變量 (variables),引用(mixins),表達(dá)式(operations),嵌套規(guī)則(nested rules)來擴(kuò)展css開發(fā).
less官方網(wǎng)址:http://lesscss.org
下面就來介紹下吧
less用變量 (variables),引用(mixins),表達(dá)式(operations),嵌套規(guī)則(nested rules)來擴(kuò)展css開發(fā)
變量 (variables)
重復(fù)使用的值可以定義成變量的形式,方便更改哈
例子如下:
#header { color: #4D926F; } h2 { color: #4D926F; }
@brand_color: #4D926F; #header { color: @brand_color; } h2 { color: @brand_color; }
引用(mixins)
在一個類中可以引用另一個類的名稱做為該類的屬性。
#header { -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } #footer { -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }
.rounded_corners { -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } #header { .rounded_corners; } #footer { .rounded_corners; }
嵌套規(guī)則(nested rules)
以前我們開發(fā)的css的時候selector的繼承都要寫的很長 ,用less后。我們可以用更簡潔,直觀的方式來寫css
實(shí)例如下:
#header { color: red; } #header a { font-weight: bold; text-decoration: none; }
#header { color: red; a { font-weight: bold; text-decoration: none; } }
表達(dá)式(operations)
一些單元之間可能有些值要成比例,比如寬高,顏色值
我們都可以用表達(dá)式來計(jì)算實(shí)現(xiàn)
#header { color: #333; border-left: 1px; border-right: 2px; } #footer { color: #222; }
@the-border: 1px; @base-color: #111; #header { color: @base-color * 3; border-left: @the-border; border-right: @the-border * 2; } #footer { color: @base-color + #111; }
相關(guān)文章
LESS 讓css也支持變量,運(yùn)算符,include,嵌套規(guī)則等等
最近在網(wǎng)上看到1個很有意思的CSS擴(kuò)展,這里介紹給大家。LESS 最早是1個ruby的gem,用于擴(kuò)展css的語法,用了LESS后,可以在css中使用變量,運(yùn)算符,include,嵌套規(guī)則等等。2010-07-04- Less 是一種樣式語言,它將 css 賦予了動態(tài)語言的特性,如變量、 繼承、 運(yùn)算、 函數(shù)。less 既可以在客戶端上運(yùn)行(支持IE 6+, Webkit, Firefox),也可以借助 Node.js 或2012-11-20
LESS 讓css也支持變量,運(yùn)算符,include,嵌套規(guī)則
最近在網(wǎng)上看到1個很有意思的CSS擴(kuò)展,這里介紹給大家。LESS 最早是1個ruby的gem,用于擴(kuò)展css的語法,用了LESS后,可以在css中使用變量,運(yùn)算符,include,嵌套規(guī)則等等。2010-07-04學(xué)習(xí)CSS預(yù)處理器:Sass和less進(jìn)行對比
Css可以讓你做很多事情,但它畢竟是給瀏覽器認(rèn)的東西,對開發(fā)者來說,Css缺乏很多特性2012-07-11- 這篇文章主要介紹了Less里css表達(dá)式的寫法,需要的朋友可以參考下。修復(fù)IE6的fixed,IE7+已經(jīng)支持了2014-06-18
- LESS(是.less后綴名的文件) 包含一套自定義的語法及一個解析器,我們根據(jù)這些語法定義自己的樣式規(guī)則,為 CSS 加入程序式語言的特性,如變量、繼承、運(yùn)算、嵌套等,更方便2014-04-22
- 這篇文章主要介紹了瀏覽器端如何使用Less,需要的朋友可以參考下2014-12-10