前幾日花了一天去看less，這幾日在搗鼓其他東西，項(xiàng)目也在有序的進(jìn)行中，今天花點(diǎn)時(shí)間整理下less的基礎(chǔ)語法，也分享實(shí)際中的一些經(jīng)驗(yàn)，與眾人共享。

本篇筆者以less的基礎(chǔ)語法著手，并配合bootstrap的邏輯結(jié)構(gòu)給大家梳理下less的語法，方便以后實(shí)戰(zhàn)中快速開發(fā)。

1.變量

與許多后臺(tái)編輯語法類似，less也有著自己的變量，不過less中的變量更確切來說是一種常量，一次賦值永不改變。

@font-size：14px;

p{font-size:@font-size}

-->p{font-size:14px}

前面說過，bootstrap源碼的variables.less文件定義了所有的變量，其他組件對(duì)應(yīng)的less文件使用了其定義的變量，方面統(tǒng)一管理。

variables.less如下所示，假如我們想簡(jiǎn)單的定制bootstrap，修改少許變量定義就可以了。

2.注釋

less的注釋與許多后臺(tái)語言相同。

行注釋：//xxxx

塊注釋：/*xxxx

xxxx*/

3.導(dǎo)入

@import "xxx";

@import語法導(dǎo)入其他文件，如定義好的變量，bootstrap就充分的利用了這一點(diǎn)，我們來看bootstrap.less源碼。

bootstrap這個(gè)文件前面有說過，引入了所有的less文件，最后直接編譯這個(gè)文件即可。

看源碼就可以看出，首先引用的是variables.less，這是所有變量的定義。

其次引入mixins.less，mixins.less中又導(dǎo)入了所有的混合函數(shù)定義，這在后面的組件less中都有用到。

這就相當(dāng)于c#等后臺(tái)語言首先導(dǎo)入類庫(kù)一般。

4.混合

.border{

border:1px solid solid;

}

.header{

height:200px;

.border;

}

-->.header{

border:1px solid solid;

height:200px;

}

混合的最大好處在于你不用一遍又一遍寫著重復(fù)的樣式了，可以隨便引用。

5.嵌套

.header{

　　xxx;

　　.header-body{

　　xxx1;

　　}

　　.header-footer{

　　xxx2;

　　}

　　&:hover{

　　xxx3;

　　}

}

-->

.header{xxx}

.header .header-body{xxx1}

.header .header-footer{xxx2}

.header:hover{xxx3}

聰明的大概可以看出來 '&'的作用了吧，&代表父選擇器，相當(dāng)去jquery中的.parent()方法。

嵌套在bootstrap中隨處可見，下面是.btn 按鈕樣式的示例。

5.媒體查詢

bootstrap很成功很大一部分原因在于其對(duì)相應(yīng)式的支持，而這離不開媒體查詢。

@media(min-width>768px){

ssss;

}

@media(min-width>970px){

ssss;

}

grid.less應(yīng)對(duì)不同屏幕的混合屬性也有所不同。

如下圖所示。

6.函數(shù)

同所有編程語言相同的是，less也有著自己的函數(shù)庫(kù)。

例如：

darken(@color,@amout)//降低一定數(shù)值的色彩亮度

參數(shù)：

• @color: 顏色對(duì)象(A color object)
• @amount: 百分比 0-100%

返回值：顏色(color)

例如bootstrap默認(rèn)鏈接hover樣式是降低了15%的亮度。

如圖所示。

7.運(yùn)算

任何數(shù)值，顏色和變量都可以進(jìn)行運(yùn)算。這里有一對(duì)示例：

@base: 5%;

@filler: @base * 2;//乘法

@other: @base + @filler;//加法

color: #888 / 4;//除法

background-color: @base-color + #111;

height: 100% / 2 + @filler;//綜合運(yùn)算

less運(yùn)算的另一個(gè)特點(diǎn)是可以自動(dòng)推算出單位，這個(gè)是很多后臺(tái)編程語言所沒有的特性，值得點(diǎn)贊。

@var: 1px + 5;

在這個(gè)例子中 Less 會(huì)在最終輸出結(jié)果中使用這個(gè)單位 --6px

bootstrap中一個(gè)典型的應(yīng)用就是，各種屏幕終端設(shè)備寬度等于定義寬度+網(wǎng)格流寬度，而這個(gè)網(wǎng)格流寬度，則會(huì)當(dāng)作左右內(nèi)邊距來使用。

8.命名空間

#bundle {

　　.button {

　　　　　　display: block; border: 1px solid black; background-color: grey; &:hover { background-color: white }

　　}

　　 .tab { ... }

　　 .citation { ... }

}

現(xiàn)在我們想在#header a中混合.button類。

一些同學(xué)是不是想到了前面說過的混合了呢，但是這里牽扯到命名空間問題，與c#等語言類庫(kù)中的方法相同，兩個(gè)類庫(kù)中可能定義這相同的方法，這個(gè)時(shí)候就要通過命名空間來區(qū)分了，說的又有點(diǎn)向java的打包了。

好吧，這個(gè)時(shí)候我們?cè)撨@么去使用。

#header a {

　　color: orange;

　　#bundle > .button;

　　 }

9.作用域

這個(gè)相當(dāng)于c#之類語言中的成員變量和局部變量了，熟悉之類語言的可以跳過這個(gè)知識(shí)點(diǎn)了。

@var: red;

#page {

　　@var: white;

　　#header {

　　　　 color: @var; // 這個(gè)時(shí)候#header 的color屬性是white

　　　　 }

}

在bootstrap中常用的大概是1--7點(diǎn)，后面兩點(diǎn)有點(diǎn)雞肋。

當(dāng)然這9點(diǎn)只是less最基礎(chǔ)的語法，如果想憑這些去定制比較好的bootstrap主題還是不夠的，但是基礎(chǔ)簡(jiǎn)單的修改還是可以得心應(yīng)手了。

晚上運(yùn)動(dòng)點(diǎn)有點(diǎn)大，天氣熱的很，熬到這個(gè)點(diǎn)有點(diǎn)小累了，所以有些例子用了官方的例子，抱歉。

預(yù)祝大家可以玩的愉快，學(xué)習(xí)的愉快。

下一篇會(huì)講解less更高級(jí)的語法，敬請(qǐng)期待

轉(zhuǎn)載本文請(qǐng)注明出處