less之旅

在遇到less以前，一直和css交往，當less出如今我碼農生涯的時候，被她給深深地吸引。今後，less成了本身碼農生活裏面的一房，css退居二房！那麼，less到底有什麼魅力讓我如此迷上她呢？

less初識

Less是一門CSS預處理語言，它擴展了CSS 語言，爲CSS賦予了動態語言的特性，增長了變量、Mixin、函數等特性，使CSS 更易維護和擴展。

Less能夠運行在node或者瀏覽器端，對於初學者來講，使用第三方編輯器考拉Koala來學習less

Koala

　　安裝Koala → 打開Koala → 面板添加CSS文件夾（先在裏面建立.less文件） → 選中.less文件 → 右側編譯選項，默認自動編譯 → 選中Refresh（生成相應CSS文件） → 用編輯器打開less文件，實現CSS編寫 → 自動生成CSS文件

less語法

變量

　　在頁面中，須要重複使用或者後期須要修改的樣式提早出來，寫成變量。該變量但是一個邊框樣式、內容樣式、像素值……

　　格式：@varablename:value ；

　　less中聲明變量使用 @ 符號，且變量不會被編譯css文件中；

less文件清單：

@f_color:#ffffff;          　　 //聲明一個背景顏色變量
div{
　　background-color:@f_color;  //使用變量 }

編譯後css文件清單：

div{
　　background-color:#ffffff;
}

說明：若後期須要修改背景顏色，直接在less中修改變量的值就能夠實現，不須要去動css文件。

 

嵌套規則

　　less中能夠在一個選擇器中嵌套另外一個選擇器來實現繼承，這樣很大程度減小了代碼量和給特定元素添加clss和id，使得代碼看起來更加的清晰。

（1）基本用法

less文件清單：

@f_color:#ffffff;　　　　//聲明一個背景顏色變量
div{
　　width:50px;
　　height:50px;
　　span{　　　　　　　　 //div中包含子元素span
　　　　display:inline-block;
　　　　background-color:@f_color;
　　}
}

編譯後css文件清單：

div{
　　width:50px;
　　height:50px;
}
div span{
　　display:inline-block;
　　background-color:#ffffff;
}

（2）嵌套一個類

　　該類是html裏面className，會在css文件中輸出，若html結構中存在該類名，則該類的樣式會起做用

less文件清單：

.cur{ 　　　　　　
　　width:50px;
　　height:50px;
}
.wrap{　　　　　　　　 //嵌套類
　　.cur;
}

編譯後css文件清單：

.cur{
　　width:50px;
　　height:50px;
}
.wrap{
　　width:50px;
　　height:50px;
}

注：這裏的關係比較複雜，在後面混入有詳細介紹

（3）選擇器繼承

　　less中的「&」符號在嵌套規則中是指引用上層（父級）選擇器，在僞類選擇器和僞元素上用的比較多；
　　less中使用繼承時，若是在聲明塊內書寫$，儘可能寫在開頭；

less文件清單：

div{
　　&:hover{　　　　　　　　　　　　 //表示div在hover的時候改變背景色
　　　　background-color:orange;
　　}
　　background-color:green;
}

編譯後css文件清單：

div{
　　background-color:green;
}
div:hover{
　　background-color:orange;
}

 

混入Mixin

(1)直接在目標位置混入另外一個類樣式（無參數混入）

　　a>混入名稱後面不加（）的狀況

　　這種狀況下，cur做爲一個html的類名className，即便不被調用也會被輸入到css中

less文件清單：

.cur{ 　　　　　　　　　　//cur是一個類名clssName
　　background-color:red;
}
div{
　　.cur;
}

css文件清單：

.cur{ 　　　　　　　　　　　　//css文件中也輸出該樣式
　　background-color:red;
}
div{
　　background-color:red;
}

　　b>混入名稱後面加上（）的狀況
　　　　這種狀況下，定義的混入類樣式，不會在css中輸出，只會存在與less文件中；小括號()內能夠加參數，也能夠不加　　

less文件清單：

.cur(){ 　　　　　　　　　　//定義不須要輸出的混入類樣式
　　background-color:red;
}
div{
　　.cur();
}

css文件清單：

div{
　　background-color:red;
}

對於混入的最佳實踐：

　　a> 不直接使用混入已有類樣式的方式，也就是第一種方式不加（）的混入；
　　b> 先定義混入類樣式，而後在須要輸出的類樣式中直接進行混入該樣式；
　　c> 混入時必須加上()來代表這不是一個clssName；

(2)定義一個不輸出的樣式，在目標位置混入（帶參數混入）

　　a> 這種狀況下，能夠給參數設置默認值，若是在後面混入類樣式的時候，須要修改該參數的值，則分下面兩種狀況：

　　　單個參數，能夠直接寫參數的值；
　　　多個參數，如需所有從新配置，能夠直接依次寫參數值；如是隻某個配置，必須加上變量名；

　　b> 混入類樣式的參數分隔符使用，和；都可，但在同一項目中必須保持統一；

less文件清單：

.br(@w:2px ; @c:red){ 　　　　//這裏參數之間採用」；「，也能夠採用「，「
　　border:@w solid @c;
}
div{
　　width:50px;
　　height:50px;
　　.br(@c:green); 　　　　  // 只配置了一個參數的值,其餘採用默認值 }

編譯後css文件清單：

div{
　　width:50px;
　　height:50px;
　　border:2px solid green;
}

 

四則運算

　　less針對css中數值型的value（數字、顏色、變量等）提供了能夠加減乘除的四則運算功能，便於咱們處理這類數值之間關係；
less文件清單：

@w:100px ;
@c:#444444;
box1{
　　width:@w;
　　height:@w /2 ;
　　color:@c / 2 ;
}
box2{
　　width:@w + 20 ;
}

css文件清單：

box1{
　　width:100px;
　　height:50px;
　　color:#222222;
}
box2{
　　width:120px;
}

特別說明：計算過程當中能夠無論單位，less會自動判斷；另外，在顏色進行運算的時候，當心踩坑！如#4f25c7，一般不建議對顏色進行運算；

 

LESS大戰瀏覽器私有前綴

　　這是愛上less緣由之所在，之前在寫css的時候，一旦用到css3中新增的屬性，都要寫上各大瀏覽器廠商的私有前綴，嚴重扯到項目開發的蛋！less的出現就填了這坑，以圓角爲例直接上代碼！

less文件清單：

.b_radius(@r:10px){ 　　　　　　//定義一個圓角混入樣式
　　-webkit-border-radius: @r;
　　-moz-border-radius: @r;
　　-ms-border-radius: @r;
　　-o-border-radius: @r;
　　border-radius: @r;
}
div{
　　.b_radius(60%);         //這裏我就沒有帶上參數名，由於一個參數，就直接上參數值 }

 css文件清單：

div{
　　-webkit-border-radius: 60%;
　　-moz-border-radius: 60%;
　　-ms-border-radius: 60%;
　　-o-border-radius: 60%;
　　border-radius: 60%;
}

 特別說明：只需在less文件中定義一次，在須要圓角屬性的輸出樣式中直接混入該類樣式便可，速度、效率那是槓槓的！

匹配模式

　　匹配模式？簡單說就是隻要知足某個樣式就能調用那個樣式，有點if語句的味道吧，以css畫小三角爲例；

less文件清單：

.triangle(right;@w:20px;@c:red){     　　 //定義右三角樣式
　　border:@w solid transparent;
　　border-left:@w solid @c;
　　border-style: dashed solid dashed dashed;
}
.triangle(left;@w:20px;@c:red){　　　　   //定義左三角樣式
　　border:@w solid transparent;
　　border-left:@w solid @c;
　　border-style: dashed dashed dashed solid;　　 //這裏是爲了解決IE6下出現的黑色邊
}
.sanjiao{
　　width:0; 
　　height:0;
　　overflow:hidden;
　　.triangle(right);       　　　　　　　　//根據須要（畫右三角形）調用上面定義的混入類樣式 }

 css文件清單：

.sanjiao { 　　　　　　　　　　　　　　　　　　//畫出向右的三角，由於只匹配right這個混入樣式
　　border: 20px solid transparent;
　　border-left: 20px solid #ff0000;
　　border-style: dashed solid dashed dashed;
　　width: 0;
　　height: 0;
　　overflow: hidden;
}

說明：很方便吧，上面定義完混入樣式，只要在須要三角形的輸出樣式中直接調用就能畫出咱們須要的三角形，是否是就完美了呢？沒！沒！！

匹配模式之愛我你就帶上我

　　上面代碼有個不足，就是每次咱們在頁面上其餘部分要畫三角形時，都得從新寫三個小可愛：

width: 0;
height: 0;
overflow: hidden;

　　有沒有解決辦法呢？有！
　　在上面less文件清單中定義混入樣式的時候，只要在加上下面這個樣式，就完美咯！！

.triangle(@_,@w:20px;@c:red){ 　　　　　　　　//注意這裏的@_
　　width:0; 
　　height:0;
　　overflow:hidden;
}

　　這時候只要在less文件清單中向下面這樣調用混入樣式也能達到上面的效果，看看代碼，少了很多吧！！！

.sanjiao{
　　.triangle(right);
}

　　爲何呢？

　　@_參數，告訴咱們每次在調用混入樣式時，都要把具備@_參數混入樣式裏面的屬性都帶上！

　　@_參數是less的固定用法，記住就好！！

　　注：後面的參數也必須帶上且與.triangle（）的參數相同，要否則後果很嚴重！

　　

註釋

　　less的註釋能夠分爲三種：

　　　（1）標準css註釋：/*shadow*/,這種註釋會保留到編譯後的css文件；
　　　（2）單行註釋：//,這種註釋只保留在less源文件中，不會出如今編譯css文件中；
　　　（3）重要註釋：/*! @版權歸shadow全部*/,這種註釋即便css文件壓縮也會保留，一般只有在聲明版權的時候用，不多用；

　 最佳實踐：在實際開發，因爲後期維護在less文件上進行，所以，沒有必要把所有註釋輸入到css文件中，常採用單行註釋://

@import導入

　　@import 對於模塊化開發來講很是有幫助！

　　實際開發中，一般有好幾個less文件，可是產品上線的時候，都會合併爲一個less文件進行編譯，如：
　　　　（1）有文件rest.less/detial.less/index.less ……
　　　　（2）在index.less導入文件rest.less/detial.less,則可在index.less文件的頭部：

@import 「rest.less」;
@import 「detial.less」;

　　　　（3）這裏能夠去掉文件名後綴，一般不建議這麼作

注：less的函數部分在此處不作介紹，若有須要請上less官網查看，http://lesscss.cn/；

 

less參考資料網址：http://efe.baidu.com/blog/revisiting-css-preprocessors/；

　　　　 　 https://github.com/ecomfe/spec/blob/master/less-code-style.md；

koala下載地址：http://koala-app.com/index-zh.html；

本文屬於本身學習總結，僅供參考，但願對你的學習有用！若有不足之處，還望請你提出寶貴的意見，我將在第一時間更改！謝謝！！