自動化高效css開發(fā)，暢談less的靈活變化-jerrylsxu

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 16:43:09

自動化高效css開發(fā)，暢談less的靈活變化-jerrylsxu

自動化高效css開發(fā)，暢談less的靈活變化-jerrylsxu: css是一種讓html與樣式分離解析而出現(xiàn)的代碼，它的出現(xiàn)大大提高了程序員的工作效率，和后期進(jìn)行維護(hù)的效率。但是發(fā)展至今，由于起死板單調(diào)的寫法，越來越不能滿足程序員們靈活的思維，很多時候是種恨鐵不成鋼的心情來寫css，于是，有一些聰明的程序員就發(fā)明

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀自動化高效css開發(fā)，暢談less的靈活變化-jerrylsxu: css是一種讓html與樣式分離解析而出現(xiàn)的代碼，它的出現(xiàn)大大提高了程序員的工作效率，和后期進(jìn)行維護(hù)的效率。但是發(fā)展至今，由于起死板單調(diào)的寫法，越來越不能滿足程序員們靈活的思維，很多時候是種恨鐵不成鋼的心情來寫css，于是，有一些聰明的程序員就發(fā)明

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

　　less是為了簡化css開發(fā)，靈活css開發(fā)而出現(xiàn)的，其功能非常強大，靈活性也很高，上手也很快，所以越來越受到前端開發(fā)的青睞，其中的基本語法我就不講了，相信度娘上有無數(shù)的教程可以參閱，我就來講點利用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);}//調(diào)用

以此類推，老板再也不用擔(dān)心我的css3跨瀏覽器兼容了；

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

 1 .list(@show:4, @width:100%, @line:10px){
 2 width: @width; overflow: hidden;
 3 ul{
 4 .cf; margin-right: -@line; 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);}//調(diào)用，參數(shù)為：一行顯示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;}//調(diào)用

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

　　4 全局參數(shù)設(shè)置網(wǎng)站主題

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

調(diào)用的時候?qū)憣?yīng)參數(shù)，如果可能，用好less的顏色計算功能，就能調(diào)試好整個網(wǎng)站的配色，讓你的網(wǎng)站一點也不單調(diào)！

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

自動化高效css開發(fā)，暢談less的靈活變化-jerrylsxu

推薦度：

點擊下載本文 文檔為doc格式

標(biāo)簽： css 靈活 less

熱門焦點

自動化高效css開發(fā)，暢談less的靈活變化-jerrylsxu

自動化高效css開發(fā)，暢談less的靈活變化-jerrylsxu

自動化高效css開發(fā)，暢談less的靈活變化-jerrylsxu

最新推薦

猜你喜歡

熱門推薦

自動化高效css開發(fā)，暢談less的靈活變化-jerrylsxu

自動化高效css開發(fā)，暢談less的靈活變化-jerrylsxu

自動化高效css開發(fā)，暢談less的靈活變化-jerrylsxu

最新推薦

猜你喜歡

熱門推薦

自動化高效css開發(fā)，暢談less的靈活變化-jerrylsxu

自動化高效css開發(fā)，暢談less的靈活變化-jerrylsxu