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

本文章由javascript技术分享原创和收集

发表评论 (审核通过后显示评论):