less的四种使用方法介绍

匿名 (未验证) 提交于 2019-12-03 00:21:02

1、直接引入less.js

使用步骤:

1、到less官网,下载less文件

2、在编译器中新建一个less文件,引入到我们的html页面中(注意下面的和css的引入方式稍微有些不同哦,看rel)

<link href="css/style.less" rel="stylesheet/less"/>

3、引入我们下载的less文件

<script src="js/less.min.js"></script>
然后就可以使用了

好处:能获取到客户端的数据,从而进一步计算

坏处:在客户端解析less,造成性能浪费,不利于维护(不推荐)

2、koala编译器

使用步骤:

1、在koala-app.com中下载软件就可以

2、打开koala软件,然后将我们的less所在的文件夹拖拽到软件中

3、koala会自动读到less文件,然后点击less文件,单击右键,选择输出的路径以及编译后的css文件名,之后在右侧菜单栏点击执行编译即可(上面的选项,只要把自动编译勾选即可,输出方式可以选择normal也可以选择compress(压缩)的方式,搜可以,其他的不需要管)

4、编译成功,会在我们指定的文件夹中生成一个css文件,之后将这个css文件引入我们的html文件中即可

(推荐小白使用)

使用步骤:

1、需要下载安装node环境,检测安装成功的方法在命令行输入npm,如果安装成功就会有一些信息,错了,就会报错

简单说一下打开命令行的方法(windows系统)win+R――输入cmd――enter――进入命令行――输入npm――按enter键

4、在编译器中实时编译(配置稍微麻烦,但本人比较喜欢这一种)

这种方法也需要安装node,之后用npm安装less,和上面的安装方法一样


然后打开我们的编译器(以webstorm为例,其他的也都大同小异)

点击文件(File)――找到Tools――File Watchers――找到右侧有个加号(+)――单击加号找到less选择less――弹出一个菜单,找到Program:后面让选择程序,找到我们安装的less程序

注:找到程序的方法:先找到C盘――users――用户(也可能是你的名字,自己起的)――AppData(如果这里找不到的话,可以找到这个菜单上面几个图标中的最后一个(Show Hidden Files and Directiories)即可找到)――Roaming――npm――lessc.cmd,选中之后,其它的不用管直接点击ok,然后再点ok即可

之后我们再去建一个less文件,它就会自动生成一个同名的css文件,把这个css文件引入我们的HTML文件中即可

我比较喜欢第四种,在实际的项目中,比较推荐的也是最后两种方法,对于初学者可能稍微麻烦,但熟悉之后就特别简单了

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!