Less这个项目在我刚开始学习前端的时候就已经有所耳闻了,直到今天才有了在项目中一展拳脚的机会。之前做demo的时候一直是在html中引入less.min.js来使用的,但是很快就发现一个问题:
不兼容IE浏览器。
是的,IE 11都报错,更别提低版本的了。好在less有命令行版本,它能够让你使用less.js将less文件转换为css文件。这样在项目中,你引用的其实还是原始的css文件,这样就不存在兼容问题了。
less命令行的安装和使用
如果你的电脑上装了npm,那么事情将会变得简单得多:
|
只需要一个命令就可以安装,less命令行的运行依赖nodejs环境,如果你还没有安装nodejs,可以在它的官网下载安装。
less的安装完成了,使用的话也很简单:
|
以上命令将会把main.less
直接转换成main.css
。
less到css的自动转换
转换是完成了,可是又出现一个问题,我们知道,css这种东西是需要不断的调试的。现有的机制下,每保存一下less,就要去CMD里面转换一下,这样无疑降低了我们的工作效率,要是能在保存的时候自动转换css就好了。
万能的G站啊,我搜了一下,还真有:
deadsimple-less-watch-compiler
还是npm:
|
或者yarn:
|
假设你的文件系统如下:
|
那么具体的使用方法如下:
|
这样保存less文件后这个插件就会自动构建css,速度也是非常的快,可以同时检测多个less文件,如果只需要监测一个less文件的话,在上面的命令行后面加上该less文件的文件名就可以了:
|
搞定!