less預處理的好處，補充關於以前發表的rem單位的運用於計算

我認識的less

優勢：優雅，好用，簡單，可複用性強，

缺點：less並其實不能爲咱們減小沉餘css代碼，仍是要靠本身的CSS基礎去判斷哪些是沉餘代碼或者是能夠合併的代碼

以前發表的一篇文章 一看就懂得移動端rem佈局、rem如何換算

關於rem的運用與計算，文章中提到了使用計算器，感受挺麻煩的，後來想一想辦法解決這個問題，

發現了less的預處理（推薦使用koala）

好比

width:100/24rem;

height:200/24rem;

若是你看過了我以前的文章

懂了rem佈局原理，而且less能讓咱們用rem佈局換算變得很是簡單，也能夠說很是直接

less還能設置傳參數，下面舉個例子

.test(@width){
width: @width;
}
.test_rem{
.test(640/24rem)
}

@width至關於一個參數，傳入去css會被編譯成

.test_rem {
width: 26.66666667rem;
}

less在處理不一樣瀏覽器之間差別的css3，只需寫一次，而後經過傳參的方式去調用，極大提升了咱們的開發效率，下面舉個例子

.border_r(@rad:4px){
border-radius: @rad;
-webkit-border-radius: @rad;
-moz-border-radius: @rad;
}

div{

width:100px;

height:100px;

.border_r();

}

在css被編譯成

div{

width:100px;

height:100px;

border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;

}

若是想改變默認值只需調用時候改變參數傳入的值

div{

width:100px;

height:100px;

.border_r(5px);

}

看到這裏是否初步掌握了less的基本用法？上面是我總結最經常使用的幾個小例子，最喜歡的是less的預處理，我寫rem佈局不再用按計算器了~！！！