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

標籤：style   blog   class   code   java   color   

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

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

　　1 less 解決 css3 的相容首碼

1 .box-shadow(@shadow){2 -webkit-box-shadow:@shadow;3 -moz-box-shadow:@shadow;4 -o-box-shadow:@shadow;5 box-shadow:@shadow;6 }#box{.box-shadow(2px 2px 3px #ccc);}//調用

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

 

　　2 以代碼塊的方式封裝less功能

 1 .list(@show:4, @width:100%, @line:10px){ 2     width: @width; overflow: hidden; 3     ul{ 4         .cf; margin-right: [email protected];  background-color: red 5     } 6     li{ 7         float:left; width: (@width - (@show - 1) * @line)  / @show; margin-right: @line;margin-bottom:  @line; 8         img{ max-width: 100%; } 9     }10 }
#xx_list{.list(4, 1030px, 10px);}//調用，參數為：一行顯示4個，總寬度，行間距

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

1 .cf(){2     min-height: 1px;zoom:1;3     &:after{content:""; display: block;height: 0; clear: both;visibility:hidden}4 }

 

　　3 less寫自訂色彩漸層按鈕以及按鈕偽類

 1 .q-grad(@bgcolor:red, @origin: left, @alpha: 0.2) { 2     background-color: @bgcolor; 3     background-image: -webkit-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha)); 4     background-image: -moz-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha)); 5     background-image: -o-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha)); 6     background-image: -ms-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha)); 7     background-image: linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha)); 8 } 9 .btn(@color, @bor-ra:2px, @fcolor: @color / 2){ 10     .q-grad(@color, top, 0.1); color: @fcolor; border:1px solid @color / 1.2; cursor: pointer; .border-radius(@bor-ra);.transition(all 0.2s ease);11     &:hover{12         background-color: @color / 1.1;13     }14     &:active{15         background-image: none;16     }17 }
.btns{.btn(@tcolor, 3px); padding: 15px 50px;}//調用

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

?

　　4 全域參數設定網站主題

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

調用的時候寫對應參數，如果可能，用好less的顏色計算功能，就能調試好整個網站的配色，讓你的網站一點也不單調！