1.less簡介及less環境搭建，首先寫less語法前不得不提下sass，之前不了解less和sass之前，這兩個東西困擾了我好久，這兩個到底是有什么區別呢，其實less和sass都是一種動態樣式語言，但是sass運行在服務器端，sass需要ruby環境(ruby和Python一樣是服務器腳本語言)，less是客戶端和服務器端都可以用，less可以運行在Node、瀏覽器和Rhino平臺上，less的運行需要node環境，其他的就是語法有點不太一樣，less是@，而sass是$。
2.用javascript的思維看less會更好理解，下面貼上less語法的代碼截圖，下面的截圖代碼均是lees代碼，想要看編譯后的css代碼需要自己編輯器查看下，截圖代碼每個less語法都有示例代碼，認真看都能看懂：
1.首先新建less文件，例如：demo.less，然后在編輯器中打開，首先當我們想要導入其它less文件的時候，我們可以直接@import ?'base';其中base為base.less文件，默認的導入less文件可以省去less格式，我們也可以導入css文件，PHP文件，見下圖代碼示例：
2.less變量的聲明：我們可以直接使用@background:#fff; ?@color:#e53fac;來聲明兩個項目經常要用到的背景顏色和字體顏色，這樣我們就可以在項目任何地方使用這兩個顏色，當要更改項目風格的時候我們可以直接更改這兩個變量就可以全部更改項目的背景色和字體顏色，示例見下圖。
注意：上面的變量引用時還可以進行加減乘除，例如color:@color+28，一樣是正確的
3.less變量的靈活性，感覺當成js會更好理解，你可以把它當做變量在傳遞，見下圖示例，上代碼：
4.less變量的妙用：當我們的項目圖片都在一個文件夾時，我們定義一個圖片路徑變量，調用時只寫一個圖片名，以后圖片換地址了，直接換基礎路徑，所有的圖片路徑都會被更換完成，但是注意這里的路徑是less文件為起點，而不是引用less文件的html文件為起點。話不多說，上代碼容易理解：
5.less變量連續使用，感覺像是連續傳值，不知道用處大不大，??，上代碼：
注意上面：less內部代碼使用&來表示自己，上面的&:after就是box:after。
6.less變量的作用域，less和js一樣有全局變量和局部變量，上代碼演示：
7.less函數的使用，當我們寫圓角，陰影，透明度的時候不可避免的會寫成下面的樣子，如果每個用到的地方都這樣寫也太麻煩了，下面先看css的寫法，以圓角為例：
下面看看less的寫法及調用，less可以直接編譯成三種兼容的css寫法，省去了自己寫不少兼容的代碼：
下面是box-shadow和text-shadow的示例：
8.less的選擇器：
9.less樣式嵌套書寫，例如，當我們有一個div.box里面嵌套了一個div.box1里面div.box2, ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?如：<div ?class='box'><div class='box1'><div class='box2'></div></div></div>那么我們在書寫less時候寫box2的樣式就不用.box .box1 .box2{}這樣來寫，less可以讓我們直接以層級結構的形式來嵌套著書寫我們的樣式，更能直觀的表達界面的結構，如下圖：
10.less樣式的引用，假如你上面寫了一樣的樣式的，下面又要用到怎么辦，less提供了一種簡寫的方式，只需要.class上面那個樣式的類名，就把他的樣式直接都拿過來了，非常方便。例如：
11.less的判斷句：什么？你沒看錯，less也可以做判斷是否讓某個樣式顯示出來，寫js呢？不管有多大用，感覺很強大有沒有，如果我們定義了一個開關來控制樣式，那么只有我們的開關為true時，樣式才會起效，例如，下面我們聲明了一個全局變量@toggle:true;然后我們在樣式表里面做判斷，只有當@toggle:true時代碼才會生效，見代碼：
12.less的extend，就是less的繼承，可以通過extend來繼承其他class的樣式，例如：下面的兩個class里面有兩個color，需要注意的是這兩個樣式的順序會對結果產生影響，見下圖：
注意上面繼承樣式的順序，不同的順序會產生不同的結果。
3.差不多上面的less語法代碼示例已經足夠滿足我們日常的項目的需要了，但是上面寫的也不過是less經常要用的功能，更多的less用法參見less中文官網。
******下面是和上面一樣的內容，只不過是文字敘述，可以不看，文字畢竟沒有代碼來的直接，下面僅用作記錄而已。
1.less變量篇：
less變量-背景色：在less文件中聲明變量@background:red;下面使用時： ? ? ? ? ? ? ? ? .box{background:@background;}，這樣非常適合一個網站的背景，當改動網站背景時只需改動上面的變量，網站的背景就會被更改完成
less變量-字體顏色：@color:#000;使用：.box{color:@color;}，也可以在使用時執行加減乘除運算，例：.box{color:@color + 111;}，css輸出：.box{color:#111;}
less變量-靈活性：@a:color；當我們定義了一個變量@a時，還可以這樣用：.box{@a:red;background-@a:#000}
less變量-妙用less變量：1.當做class使用：@bg:box；下面使用的時候我們就可以直接.@{bg}{ }；輸出：.box{ }; ?2.當做路徑使用，如：@picturePath:"../img/"，那么當我們把項目圖片都放到img文件夾的時候就不用每次填寫長長的路徑，示例：.@{bg}{background:url("@{picturePath}baby.jpg")}，輸出：.box{background:url("../img/baby.jpg")}；只需要寫一個圖片名就可以了，有沒有方便了一點，但是注意：此處的變量@picturePath是less文件所在的文件夾為起點，不是html文件的起點位置
less-變量-連續用：@str:"123",@number:"str";使用示例：content:@@number;輸出：content："123"
less變量作用域：less的變量也有作用域的區別：當在一個樣式里面定義了@color變量的時候，他會使用就近的@color變量，而不是全局的@color變量。
2.less函數篇：
*圓角：當我們寫一些圓角，陰影，透明度這些的時候，免不了寫一些兼容性的代碼，如：.box{border-redius:100%;-webkit-border-redius:100%;-moz-border-redius:100%;}，這樣寫起來不僅麻煩，也繁瑣，我們就可以利用less函數來寫成下面這樣：.borderRadius(@borderRadius:100%){border-redius:@borderRadius;-webkit-border-redius:@borderRadius;-moz-border-redius:@borderRadius;}；@borderRadius也可以寫成：@arguments，這樣我們下面就可以這樣調用? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? .box{ .borderRadius;}? /? .box{ .borderRadius();}? .box{ .borderRadius(50%);}? ? .box{ .borderRadius(10px 20px 30px 40px);}，如果傳遞了參數，按照傳入的參數來，如果沒有傳遞參數，默認是我們寫好的100%；這樣只需一個函數名，我們就完成了同個樣式加前綴寫三遍的問題。
*陰影：.boxShadow(@boxShadow:0? 2px? 3px? rgba(0,0,0,0.9)){box-shadow:@boxShadow;-webkit-box-shadow:@boxShadow;-moz-box-shadow:@boxShadow;}，當我們的網站主題風格文本和div都有陰影的時候，這個非常有用，調用時和上面的圓角一樣，參數我們已經設好了默認，也可以自己傳，傳的參數就和box-shadow的官方參數一樣，相似的還有文本陰影textShadow。
3.less選擇器篇：當我們寫代碼 a{? &:hover{ background:red } };這樣選擇到的是a元素，輸出a:hover{ background:red }，當我們寫.div{ &_a{color:red}? &_b{color:blue} }，編譯后：.div_a{color:red};.div_b{color:blue},
4.less擴展篇： ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?①less的嵌套規則：.box{ ? .box1{ ?.box2{} ?} ?}，加入我們最外層一個div類名是box，里面套一個div類名是div1，div1里面套了一個div，類名是div2，那么我們再寫樣式的時候就可以直接嵌套著這樣一直寫下去。
②less樣式引用，如果我們定義了兩個樣式：.box{background:red}，.box1{color:red; .box}，示例了在box1中引用box的樣式背景顏色。注意如果需要.box里面元素的樣式的話需要寫成.box1{color:red; ?.box > .boxChild;}
③less的判斷句：如果我們聲明了一個變量@toggle:true;那么我們也可以寫：.box when(@toggle ?= true){color:red}，那么只有當toggle為true時字體顏色才是紅色的，這非常適合某些樣式只有偶爾用的時候，我們可以就這樣加個開關，這個我們好像再寫js啊
④：less的extend。當我們寫了樣式.content1{color:red}，.content2{ &:extend(.content1);color:blue};這樣，content2的字體顏色也會變成red，自己的color:blue會被覆蓋 但是如果我們把content1的樣式放在content2樣式下面的話，content2的字體顏色就是是自己的顏色blue，不會被覆蓋。
⑤：less的導入:我們可以在一個less文件中導入另一個less文件，例如：@import? "less文件名",可以這樣：@import? "less"? /? @import? "less.less"? /? @import? "less.css"? /? @import? "less.php"，導入的less帶不帶擴展名都可以，對，你沒有看錯，還可以將PHP文件導入進來，導入也有好多參數可選，有興趣可以查看less官網或者less中文官網，或者bootstrap官網，因為bootstrap也對less進行了翻譯。
注意：導入文件的時候不可避免的會產生問題，如：我們在文件中定義了變量@color，導入進來的文件里面也有變量@color，那么起作用的是當前文件的變量@color，而不是導入文件的@color。
