教你使用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，欢迎大家补充和完善！