Bootstrap定製(二)less基礎語法

前幾日花了一天去看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主題仍是不夠的，可是基礎簡單的修改仍是能夠駕輕就熟了。

晚上運動點有點大，天氣熱的很，熬到這個點有點小累了，因此有些例子用了官方的例子，抱歉。

預祝你們能夠玩的愉快，學習的愉快。

下一篇會講解less更高級的語法，敬請期待

轉載本文請註明出處