### 什么是Less 官方文檔上面說：Less 是一門 CSS 預處理語言，它擴展了 CSS 語言，增加了變量、Mixin、函數等特性，使 CSS 更易維護和擴展。 說白了Less就是動態的CSS，也就是具備函數、變量、控制語句的CSS。要知道，很多時候CSS都需要對同一個樣式重復寫很多遍，Less使得CSS的編寫更加簡單和方便。 <br/> ### 如何使用Less Less可以通過npm來安裝 ~~~ $ npm install -g less ~~~ 我使用的是第三方的GUI——koala koala使用起來非常簡單，只需要將Less所在的文件夾放置到koala中配置好輸出路徑就可以正常使用Less來完成預處理，并且koala自帶錯誤提示功能。 下載地址：http://koala-app.com/index-zh.html ### Less詳解 #### 注釋 Less新增了“//”注釋法，更貼近與程序設計語言。這種注釋方法在編譯的時候不會被保留，也就是生成的css文件中這個注釋會被 pass掉。而“/**/”這種注釋法在編譯的時候會被保留。 <br/> #### 變量 Less的變量聲明方法為：@+變量名。 ~~~ @myColor:red; div{ background:@myColor; } ~~~ 編譯后的css為 ~~~ div{ background:red; } ~~~ <br/> #### 混合 什么是混合?我個人將它理解成css版本的函數。 ~~~ .border{ border:1px solid black; } .box{ color:white; background:red; .border;//應用.border的樣式 } ~~~ 有人會問：這個Less哪里簡單了，感覺反而更麻煩了。別急，往下面看。 <br/> #### 帶參數的混合 帶參數的混合就更好理解了，它更向函數去靠近了。 ~~~ .border(@myWidth){ border:@myWidth solid black; } .box{ color:white; background:red; .border(3px);//傳入參數 } ~~~ 當然，混合也可以指定默認的參數，這樣就不必每次都給它傳參啦。 ~~~ .border(@myWidth:3px){ border:@myWidth solid black; } .box{ color:white; background:red; .border();//這里可以不用傳參了，但是必須要有括號！ } ~~~ 再看一個例子，css3針對不同瀏覽器做了hack，也就是增加前綴，這種hack方法的確實現了兼容各瀏覽器開發，但是帶來的弊端就是我們必須去寫大量的hack代碼，不僅浪費時間，整個css文件也十分臃腫。下面是使用Less來解決這一問題： ~~~ .border(@width:3px){ -webkit-border-radius:@width; -moz-border-radius:@width; -ms-border-radius:@width; border-radius:@width; } div{ background:red; height:100px; width:100px; .border(50px); } ~~~ 表面上看起來并不簡單，但是當需要多個地方使用這個border-radius的時候只需要調用.border()就可以了而不必再去寫重復的代碼。把它映射到高級程序設計語言中，是封裝一個函數每當需要的時候去調用它方便還是每次都重新敲一遍代碼方便？ <br/> #### 匹配模式 這個有點像if語句，但是和if又有很大的區別，它是根據傳入不同的參數來執行不同的樣式操作。 ~~~ .color(r,@width:50px,@height:50px)//如果第一個參數是r則使用該樣式 { background:red; } .color(b,@width:50px,@height:50px)//如果第一個參數是b則使用該樣式 { background:blue; } .color(y,@width:50px,@height:50px)//如果第一個參數是r則使用該樣式 { background:yellow; } .color(@_,@width:50px,@height:50px) { width:@width; height:@height; .border(10px); } ~~~ 這里就和if語句不一樣了，Less是根據傳入的參數的不同來選擇究竟進入到哪個“函數之中”。代碼的最后一段有一個@_參數，它的意思是，無論匹配是否成功都會進入到這里。 ~~~ div{ .color(r); } ~~~ 上述代碼編譯后的css為 ~~~ div{ background:red; width:50px; height:50px; } ~~~ 那么如果我輸錯了參數會怎樣？ ~~~ div{ .color(g); } ~~~ 編譯后的css就變為 ~~~ div{ width:50px; height:50px; } ~~~ 無論匹配是否成功，最終都會應用帶有@_參數的樣式。 <br/> #### 運算 Less支持變量的運算。比如 ~~~ @myWidth:300px; div{ width:@myWidth-100; } ~~~ 最終div的寬度就是200px，可以看到100并沒有加單位px，因為@myWidth已經有單位了，所以100可以不用加單位，但是為了更加直觀最好還是加上單位。 <br> #### 嵌套 嵌套可以說是Less最有意思的功能，也是最實用的功能。 舉個例子，如果需要創建一個導航欄，樣式可能會這樣寫 ~~~ ul { width: 500px; margin: 30px auto; padding: 0px; list-style: none; } ul li { height: 30px; line-height: 30px; margin-bottom: 3px; background: green; } ul li a { float: left; } ul li a:hover { color: blue; } ul li span { float: right; } ~~~ 這種寫法十分標準，它告訴了我們哪個位置的a標簽應用了這個樣式，而且標簽和標簽的嵌套關系也十分明了。但是如果父層的類名十分長，這種寫法就比較麻煩了。 而Less模仿了html的嵌套語法 ~~~ ul{ width:500px; margin:30px auto; padding:0px; list-style: none; li{ height:30px; line-height:30px; margin-bottom:3px; background:green; a{ float:left; &:hover{//匹配上一級元素，也就是a color:blue; } } span{ float:right; } } } ~~~ 代碼中&代表著匹配它的父級選擇器，在上述代碼里&的父級選擇器是a，也就是a:hover。 <br/> Less還有很多高級用法和庫，我會繼續深入學習下去的~