教你使用Less快速開發CSS

俗話說，工欲善其事，必先利其器。好的工具不僅能有效提高工作效率，還能讓你的工作完成得更好。而在前端開發領域就有很多很好用的工具，比如各種JS框架和庫，以及一些預編譯工具，就比如本文要講到的Less，當然Sass同理，不再贅述。

本文不講Less語法，重點要講的是能利用它有效提高開發效率的思維方法，相關語法可以直接前往 Less官網 查看。

在大多數編程語言中，變量、循環、函數、類等特性能有效地減少重複代碼的產生，從而提高工作效率。然而，CSS並不能算是嚴格意義上的編程語言，它並不具備這些特性（CSS變量除外，但個人覺得並不好用），而很多CSS屬性又是我們經常需要書寫的，因此就可能造成許多重複的代碼，項目越大，重複工作就越多。

因此，Less閃亮登場，讓你的代碼寫得less！

1. 初階用法——封裝屬性

舉個簡單的例子，當我們要給一段文字設置樣式時經常需要設置邊距、字體、行高、顏色等樣式，而寫完這段文字樣式，下一段文字又同樣要寫這些樣式屬性，只不過屬性值可能不一樣而已。那麼，這些需要經常反覆書寫的屬性名，是否可以進行封裝簡化呢？

答案當然是肯定的，只需要使用Less中的 混合 功能就可以了。

例如，使用Less前的樣式可以是這樣的：

.p1{ margin-top: 10px; font-size: 24px; line-height: 1.5; color: #666;}
.p2{ margin-top: 20px; font-size: 20px; line-height: 1; color: #fff; background-color: #000;}

而使用Less後……

// lib.less
.mt(@top: 0){ margin-top: @top;}
.fs(@size: 0){ font-size: @size;}
.lh(@len: 1){ line-height: @len;}
.c(@color: #fff){ color: @color;}
.bgc(@color: #fff){ color: @color;}

@import 'lib.less'
.p1{.mt(10px); .fs(24px); .lh(1.5); .c(#666);}
.p2{.mt(20px); .fs(20px); .lh(); .c(); .bgc(#000);}

看到了嗎？只需要一開始封裝好一個Less庫，然後引入這個庫之後的代碼就可以簡短很多。CSS屬性名大大簡化，寫得多了，你一定會愛上這種寫法的！

2. 進階用法——封裝樣式塊

有些時候我們爲了實現一個效果，經常需要好幾個樣式屬性共同實現，那麼這時我們就可以把它們都封裝到一起，然後只傳入需要的屬性值就可以了。

比如一個經典的橫縱向居中的樣式，有很多種實現方式，具體可以看看我之前總結的一篇文章《純CSS七大居中方法》。我們就拿其中的 “Flexbox居中法” 來說吧，封裝起來非常簡單，甚至都不需要傳任何參數：

.flex-center(){ display: flex; justify-content: center; align-items: center; }

如果你覺得這個名字還有點長，沒關係，再縮下就好了，甚至可以只需要兩個字母，只要你看到這個名字第一反應知道它是什麼就行。比如這樣：

.fc(){ display: flex; justify-content: center; align-items: center; }

再比如一個元素的寬高：

.wh(@w, @h){ width: @w; height: @w; }

調用也非常簡單：

.wh(100px, 100px);

3. 高階用法——封裝單位

其實在寫CSS時，我們寫得最多的並不是CSS屬性名，而是CSS屬性值中的單位，就比如我們最常用單位px和rem，他們真的是無處不在，幾乎每寫一行CSS都得帶上它，太煩了，能不能把它也一併封裝起來呢？

答案當然也是肯定的，下面我們就來看看這種神奇的用法。

同樣拿上面舉的段落樣式的例子，繼續封裝簡化後如下：

// lib.less
@unit: 1px;
.mt(@top: 0){ margin-top: @top * @unit;}
.fs(@size: 0){ font-size: @size * @unit;}
.lh(@len: 1){ line-height: @len;}
.c(@color: #fff){ color: @color;}
.bgc(@color: #fff){ color: @color;}

@import 'lib.less'
.p1{.mt(10); .fs(24); .lh(1.5); .c(#666);}
.p2{.mt(20); .fs(20); .lh(); .c(); .bgc(#000);}

然後你會驚奇地發現，所有單位都沒有了，開心！

可是問題又來了，有些時候我們又得使用帶單位的，那又該如何處理呢？

就比如字體大小font-size，本來正常像上面那樣寫是沒什麼問題的，但是哪天我要是突然要用em單位呢？那麼像這種必須使用非純數字屬性值時，上面那種純數字使用方式就有問題了，這時我們就可以運用Less中的類型函數（判斷值類型）和邏輯函數（根據不同值類型輸出不同值）來解決這個問題。

還是以上面例子，我們稍加改動：

// lib.less
@unit: 1px;
.mt(@top: 0){ margin-top: if(isunit(@top,''),@top * @unit,@top);}
.fs(@size: 0){ font-size: if(isunit(@size,''),@size * @unit,@size);}
.lh(@len: 1){ line-height: @len;}
.c(@color: #fff){ color: @color;}
.bgc(@color: #fff){ color: @color;}

其中if()是邏輯判斷函數，而isunit()是判斷數值單位函數。

每次去判斷數值單位也挺麻煩的，我們最好也把它封裝一下：

// lib.less
@unit: 1px;
/* CSS鍵值對 */
.css(@key, @val){
    @{key}: if(isunit(@val,''),@val * @unit,@val);
}

.mt(@top: 0){ .css(margin-top,@top);}
.fs(@size: 0){ .css(font-size,@size);}
.lh(@len: 1){ line-height: @len;}
.c(@color: #fff){ color: @color;}
.bgc(@color: #fff){ color: @color;}

Nice！大功告成！接下來就可以“爲所欲爲”地使用它們了~

@import 'lib.less'
.p1{.mt(10px); .fs(24); .lh(1.5); .c(#666);}
.p2{.mt(20%); .fs(1em); .lh(); .c(); .bgc(#000);}

當不傳單位時默認單位就是px，當然這個默認單位你是可以根據使用情況來修改的，只需要更改最上面定義的那個@unit值即可。

---

結束語

本人根據本文介紹的方法自己組建了一個Less庫（lib.less），現已開源，源碼請戳→https://gitee.com/chchlsh/less-library，歡迎大家補充和完善！