Less 是一門 CSS 預處理語言，它擴展了 CSS 語言，增加了變量、Mixin、函數等特性，使 CSS 更易維護和擴展。 LESS官網（中文）：http://lesscss.cn/
方式一：直接通過引入less.js文件，通過瀏覽器端來編譯.less文件（類css文件），當然先要下載less.js文件放在項目文件中，目錄就來個簡單的。 —-less —-images —-js index.html
<link rel="stylesheet/less" type="text/css" href="less/style.less"> <script src="js/less-1.3.3.min.js" type="text/javascript"></script> 1212.less文件是一定要在less.js文件之前引入的。我們也可以把.js文件放在</body>的前面。
方式二：通過編譯工具將.less文件編譯成css文件之后，在html文件中直接引用。 常用的編譯工具有（新人知道這個就好了）Koala（考拉，國人自己開發） –http://koala-app.com/index.html
其實要寫的話，你直接全部按照css去寫也可以。當然，如果這樣寫的話就不需要less了，他主要是增加了變量、混合、函數、嵌套、命名空間、作用域等方便編碼的寫法。 比如：
@color:red; #header { color: @color; } h2 { color: @color; } 12345671234567編譯之后就是
@color:red; #header { color: red; } h2 { color: red; } 12345671234567這樣是不是對于好多相同的樣式設置都不用寫好多遍了。
1.注釋（Comments） 和js一樣，單行“//”和多行“/* /”。編譯時會刪除“//”保留“/ */”。 2.變量（Variables）
@nice-blue: #5B83AD;@light-blue: @nice-blue + #111;#header { color: @light-blue;}//編譯輸出#header { color: #6c94be;}12345678910123456789103.混合（Mixins）
.bordered { border-top: dotted 1px black; border-bottom: solid 2px black;}#menu a { color: #111; .bordered;}//編譯輸出#menu a { color: #111; border-top: dotted 1px black; border-bottom: solid 2px black;}123456789101112131412345678910111213144.嵌套（Nested Rules）
#header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; &:hover{ color:red;//&表示父級 } }}//編譯輸出#header { color: black;}#header .navigation { font-size: 12px;}#header .logo { width: 300px;}#header .logo:hover { color:red;}12345678910111213141516171819202122232425123456789101112131415161718192021222324255.匹配模式
.border{border: 2px solid #ccc; border-radius: 4px;}//編譯會出現在css文件中，如果是.border(){}則只會引用不會編譯到css文件中。 .header {.border;} //調用時一定要傳參數，沒有默認參數一定要帶參數 .border(@width, @color, @radius){border: @width solid @color; border-radius: @radius;} .header{.border(2px, #ccc, 4px);} //帶默認參數，有默認參數可以帶參數或者使用默認的 .border(@width:2px, @color:#ccc, @radius: 4px){ border: @width solid @color; border-radius: @radius; } .header {.border(4px, #f00, 2px);} //@arguments 指所有參數 .border (@width:1px, @style:solid, @color:#ccc){border: @arguments;} 12345678910111213141516123456789101112131415166.地址（把地址當成常量）
// Variables@images: "../img";// Usagebody { color: #444; background: url("@{images}/white-sand.png");}1234567812345678寫到這里基礎寫法就不介紹了，大家上官網大概看一遍API就OK了，然后在工作中慢慢寫慢慢學吧。 初學的話我建議先看一遍API然后寫點簡單的例子，然后看看bootstrap的less源碼，你就知道那些你常用到的類是怎么寫的了。展示一些常用的給大家看下。
.clearfix { *zoom: 1; &:before, &:after { display: table; content: ""; line-height: 0; } &:after { clear: both; }}.ie7-inline-block() { *display: inline; /* IE7 inline-block hack */ *zoom: 1;}.text-overflow() { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}// Border Radius.border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius;}// Transitions.transition(@transition) { -webkit-transition: @transition; -moz-transition: @transition; -o-transition: @transition; transition: @transition;}// Opacity.opacity(@opacity) { opacity: @opacity / 100; filter: ~"alpha(opacity=@{opacity})";}12345678910111213141516171819202122232425262728293031323334353637383940414243441234567891011121314151617181920212223242526272829303132333435363738394041424344以后像這種代碼就不用重復寫了是不是很爽。特別是那種要寫內核兼容的。
最后給大家說一下我的less文件是怎么來寫的。（目錄–參考bootstrap） 目錄： –docs文檔 –img圖片 –less樣式 |-variables.less變量 |-mixins.less混合 |-reset.less重置 |-layouts.less布局 |-sPRites.less圖標 –js插件 小文件的話直接全部寫在一個文件里就好了，不過也可以分開寫，通過import導入也是一樣的。
開始用less寫過幾個頁面之后就可以看看bootstrap中less和z.less是怎么寫的了。然后也可以參照他們的寫法調整到自己的工作用。 z.less:http://www.aibusy.com/zless/index.html
新聞熱點
疑難解答
