less的四种使用方法介绍

less的四种使用方法介绍

1、直接引入less.js
使用步骤：
1、到less官网，下载less文件
2、在编译器中新建一个less文件，引入到我们的html页面中（注意下面的和css的引入方式稍微有些不同哦，看rel）
3、引入我们下载的less文件
然后就可以使用了
好处：能获取到客户端的数据，从而进一步计算
坏处：在客户端解析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文件中即可
我比较喜欢第四种，在实际的项目中，比较推荐的也是最后两种方法，对于初学者可能稍微麻烦，但熟悉之后就特别简单了

• 本内容来源互联网，如涉及版权问题请及时联系站长
• 为防止代码解析，除代码框内<>为正常，其余请重新替换<>尖括号