前幾日花了一天去看less，這幾日在搗鼓其他東西，項目也在有序的進行中，今天花點時間整理下less的基礎語法，也分享實際中的一些經驗，與眾人共享。
本篇筆者以less的基礎語法着手，並配合bootstrap的邏輯結構給大家梳理下less的語法，方便以后實戰中快速開發。
1.變量
與許多后台編輯語法類似，less也有着自己的變量，不過less中的變量更確切來說是一種常量，一次賦值永不改變。
@font-size：14px;
p{font-size:@font-size}
-->p{font-size:14px}
前面說過，bootstrap源碼的variables.less文件定義了所有的變量，其他組件對應的less文件使用了其定義的變量，方面統一管理。
variables.less如下所示，假如我們想簡單的定制bootstrap，修改少許變量定義就可以了。
2.注釋
less的注釋與許多后台語言相同。
行注釋：//xxxx
塊注釋：/*xxxx
xxxx*/
3.導入
@import "xxx";
@import語法導入其他文件，如定義好的變量，bootstrap就充分的利用了這一點，我們來看bootstrap.less源碼。
bootstrap這個文件前面有說過，引入了所有的less文件，最后直接編譯這個文件即可。
看源碼就可以看出，首先引用的是variables.less，這是所有變量的定義。
其次引入mixins.less，mixins.less中又導入了所有的混合函數定義，這在后面的組件less中都有用到。
這就相當於c#等后台語言首先導入類庫一般。
4.混合
.border{
border:1px solid solid;
}
.header{
height:200px;
.border;
}
-->.header{
border:1px solid solid;
height:200px;
}
混合的最大好處在於你不用一遍又一遍寫着重復的樣式了，可以隨便引用。
5.嵌套
.header{
xxx;
.header-body{
xxx1;
}
.header-footer{
xxx2;
}
&:hover{
xxx3;
}
}
-->
.header{xxx}
.header .header-body{xxx1}
.header .header-footer{xxx2}
.header:hover{xxx3}
聰明的大概可以看出來 '&'的作用了吧，&代表父選擇器，相當去jquery中的.parent()方法。
嵌套在bootstrap中隨處可見，下面是.btn 按鈕樣式的示例。
5.媒體查詢
bootstrap很成功很大一部分原因在於其對相應式的支持，而這離不開媒體查詢。
@media(min-width>768px){
ssss;
}
@media(min-width>970px){
ssss;
}
grid.less應對不同屏幕的混合屬性也有所不同。
如下圖所示。
6.函數
同所有編程語言相同的是，less也有着自己的函數庫。
例如：
darken(@color,@amout)//降低一定數值的色彩亮度
參數：
@color: 顏色對象(A color object)@amount: 百分比 0-100%
返回值： 顏色(color)
例如bootstrap默認鏈接hover樣式是降低了15%的亮度。
如圖所示。
7.運算
任何數值，顏色和變量都可以進行運算。這里有一對示例：
@base: 5%;
@filler: @base * 2;//乘法
@other: @base + @filler;//加法
color: #888 / 4;//除法
background-color: @base-color + #111;
height: 100% / 2 + @filler;//綜合運算
less運算的另一個特點是可以自動推算出單位，這個是很多后台編程語言所沒有的特性，值得點贊。
@var: 1px + 5;
在這個例子中 Less 會在最終輸出結果中使用這個單位 -- 6px
bootstrap中一個典型的應用就是，各種屏幕終端設備寬度等於定義寬度+網格流寬度，而這個網格流寬度，則會當作左右內邊距來使用。
8.命名空間
#bundle {
.button {
display: block; border: 1px solid black; background-color: grey; &:hover { background-color: white }
}
.tab { ... }
.citation { ... }
}
現在我們想在 #header a 中混合 .button 類。
一些同學是不是想到了前面說過的混合了呢，但是這里牽扯到命名空間問題，與c#等語言類庫中的方法相同，兩個類庫中可能定義這相同的方法，這個時候就要通過命名空間來區分了，說的又有點向java的打包了。
好吧，這個時候我們該這么去使用。
#header a {
color: orange;
#bundle > .button;
}
9.作用域
這個相當於c#之類語言中的成員變量和局部變量了，熟悉之類語言的可以跳過這個知識點了。
@var: red;
#page {
@var: white;
#header {
color: @var; // 這個時候#header 的color屬性是white
}
}
在bootstrap中常用的大概是1--7點，后面兩點有點雞肋。
當然這9點只是less最基礎的語法，如果想憑這些去定制比較好的bootstrap主題還是不夠的，但是基礎簡單的修改還是可以得心應手了。
晚上運動點有點大，天氣熱的很，熬到這個點有點小累了，所以有些例子用了官方的例子，抱歉。
預祝大家可以玩的愉快，學習的愉快。