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布局不再用按计算器了~！！！