自動化高效css開發，暢談less的靈活變化

css是一種讓html與樣式分離解析而出現的**，它的出現大大提高了程式設計師的工作效率，和後期進行維護的效率。但是發展至今，由於起死板單調的寫法，越來越不能滿足程式設計師們靈活的思維，很多時候是種恨鐵不成鋼的心情來寫css，於是，有一些聰明的程式設計師就發明了less。

less是為了簡化css開發，靈活css開發而出現的，其功能非常強大，靈活性也很高，上手也很快，所以越來越受到前端開發的青睞，其中的基本語法我就不講了，相信度娘上有無數的教程可以參閱，我就來講點利用less靈活的特點做的一些東西。

1 less 解決 css3 的相容字首

1
.box-shadow(@shadow)
#box//呼叫

以此類推，老闆再也不用擔心我的css3跨瀏覽器相容了；

2 以**塊的方式封裝less功能

1
.list(@show:4, @width:100%, @line:10px)6li
9}10}
#xx_list//呼叫，引數為：一行顯示4個，總寬度，行間距

直接就能出item列表了，（.cf為清除浮動less，具體**如下：）

1
.cf()
4}

3 less寫自定義顏色漸變按鈕以及按鈕偽類

1
.q-grad(@bgcolor:red, @origin: left, @alpha: 0.2) 
9.btn(@color, @bor-ra:2px, @fcolor: @color / 2)
14&:active17}
.btns//呼叫

一次性又搞定了漸變，搞定了按鈕的偽類，cool！

4 全域性引數設定**主題

1
@url:"../images/";
2@bgcolor: #fff;
3@fcolor:#666;
4@hcolor:#ccc;
5...

呼叫的時候寫對應引數，如果可能，用好less的顏色計算功能，就能除錯好整個**的配色，讓你的**一點也不單調！