less安装与使用 、vs配置less 、HBuilderX配置less

安装和使用 LESS

https://less.bootcss.com/

一、命令安装less (我是全局安装的  win + R  —— cmd 输入下面命令 )

npm install -g less

1、使用——在新建的项目里新建less.less文件

2、命令行编译.less文件(注意：这地方要对应自己的目录,第一次没加目录css失败了)

lessc css/less.less css/less.css   // 编译成css
lessc --clean-css css/less.less css/less.min.css  // 编译压缩css

编译完，css目录下就会自动生成less.css文件，页面医用less.css文件即可，这种写一些就需要编译一下，不能及时的编译

二、直接引用的使用方法

页面直接引用less.less  在引用less.js ，这种不需自己编辑，脚本自己执行

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js"></script>

三、依靠编辑器的插件编译（这种页面引用.less 对应的 .css 文件）

HBuilder配置和使用

工具——插件安装——安装新的插件，如果列表没有就点前往插件市场  搜 less，根据提示安装即可

配置less，安装完重启编辑器，工具——外部命令插件配置——找到刚安装的less——package.json——搜 onDidSaveExecution 改为true ，这样就可以自动保存对应的.css文件

VS （ Visual Studio Code ） 配置及使用

先安装less 插件，安装完记得重启一下编辑器

找到 .vscode 文件夹中 settings.json 设置文件，.vscode这个文件是我创建项目时自动生成的

添加下面即可

{
    
	"less.compile": {
		"compress": false, // //是否压缩 是否删除多余空白字符  
		"sourceMap": false, // 是否生成map文件，有了这个可以在调试台看到less行数
		"out": true, // 是否编译输出文件
		"outExt": ".css" // 输出文件的后缀,默认为.css
	}
}

自动编译最终效果

less.less里 

保存后自动生成 less.css(在编写保存后里面内容会及时变更)