欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)語言的特性

    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á)式的寫法示例介紹

    這篇文章主要介紹了Less里css表達(dá)式的寫法,需要的朋友可以參考下。修復(fù)IE6的fixed,IE7+已經(jīng)支持了
    2014-06-18
  • less開發(fā)指南

    LESS(是.less后綴名的文件) 包含一套自定義的語法及一個解析器,我們根據(jù)這些語法定義自己的樣式規(guī)則,為 CSS 加入程序式語言的特性,如變量、繼承、運(yùn)算、嵌套等,更方便
    2014-04-22
  • 瀏覽器端如何使用Less

    這篇文章主要介紹了瀏覽器端如何使用Less,需要的朋友可以參考下
    2014-12-10

最新評論