less使用方法

1、less可以在node.js环境下运行

2、less可以在浏览器中直接运行

2.1、浏览器中运行方式一

步骤：

• （1）编写less文件
• （2）引入less文件
• （3）引入less.js下载地址
• （4）运行

//引用文件
<link rel="stylesheet/less" href="css/index.less">
<script src="js/less.min.js"></script>

注意点:

• 一定要先引入less.css再引入less.js。不然无效果
• less.css引入的写法为 。一定要在rel中添加“/less”
• 如果less代码是写到单独的文件中, 一定要在服务端环境（webstrom中打开就是服务端环境）运行才能生效。如果直接打开HTML打开，就会无效。

本用法存在的问题：

因为是在运行的时候才通过less.js文件对.less文件进行加工处理，因此在运行的时候加工处理会产生性能问题。

2.2、浏览器中运行方式二：

提前预编译

步骤：

• （1）编写less文件
• （2）利用工具转换为css文件（转换方法见下方）
• （3）引入css文件

<link rel="stylesheet" href="css/index.css">  

工具转换为css文件常用方法：

方法一：考拉客户端:下载较慢（win中安装，不要修改路径）
优点：无需引入less.js, 无需在服务端运行

• 使用方法如下：
  （1）点击“+”号选择.less文件所在文件夹
  （3）选中.less文件
  （4）点击“Compile”按钮，开始将.less文件转换为.css文件。
  （5）出现“success”提示后，点击“Refresh”按钮，编译器中.less下方就会出现转换成功的.css文件
  
  
  方法二：开源中国（在线转换网站）
  复制写好的.less文件内容，粘贴到左侧输入框。
  点击Less》CSS按钮，即可生成CSS代码
  
  方法三：构建工具配置loader自动编译: 后续说明