bootstrap中l(wèi)ess學(xué)習(xí)

琴湘苑 2015-01-27

展開全文

變量

變量允許我們單獨定義一系列通用的樣式，然后在需要的時候去調(diào)用。所以在做全局樣式調(diào)整的時候我們可能只需要修改幾行代碼就可以了。

// LESS /* 生成的 CSS */

@color: #4D926F; #header {

#header { color: #4D926F;
color: @color; }
} h2 {
h2 { color: #4D926F;
color: @color; }
}

混合

混合可以將一個定義好的class A輕松的引入到另一個class B中，從而簡單實現(xiàn)class B繼承class A中的所有屬性。我們還可以帶參數(shù)地調(diào)用，就像使用函數(shù)一樣。

// LESS

.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}

#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}
/* 生成的 CSS */

#header {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#footer {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

嵌套規(guī)則

我們可以在一個選擇器中嵌套另一個選擇器來實現(xiàn)繼承，這樣很大程度減少了代碼量，并且代碼看起來更加的清晰。

// 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;
}

函數(shù) & 運算

運算提供了加，減，乘，除操作；我們可以做屬性值和顏色的運算，這樣就可以實現(xiàn)屬性值之間的復(fù)雜關(guān)系。LESS中的函數(shù)一一映射了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;
}

在客戶端使用

引入你的 .less 樣式文件的時候要設(shè)置 rel 屬性值為 “stylesheet/less”:

然后點擊頁面頂部download按鈕下載 less.js, 在中引入:

注意你的less樣式文件一定要在引入less.js前先引入。

備注：請在服務(wù)器環(huán)境下使用！本地直接打開可能會報錯！

less官網(wǎng)：http://www./features/

有過其他編程經(jīng)驗的開發(fā)者學(xué)起來應(yīng)該不難，花點時間都可以熟練掌握。

Less 是一個CSS 預(yù)編譯器,意思指的是它可以擴展Css語言,添加功能如允許變量(variables)，混合(mixins)，函數(shù)(functions) 和許多其他的技術(shù)，讓你的Css更具維護性，主題性，擴展性?，F(xiàn)在就得編譯這些less文件了，在線編譯的網(wǎng)站很多，但是沒有本地編譯贊。同樣本地編譯的軟件很多，這里以kola為例。
官方下載地址：http:///index-zh.html

編輯less文件后，使用koala編譯bootstrap文件，koala運行界面如下：

koala的用法中文 https://github.com/oklai/koala/wiki/開始使用Koala
http://code.csdn.net/news/2819548

編譯后的文件，這就是我們最終要的文件了。引入項目開發(fā)即可。