预处理语言
CSS是一门标记性语言，对于初学者来者说，很难写出组织良好的且易于维护的CSS代码；
预处理语言扩充了CSS语言，增加了诸如变量、混合、函数等功能，让CSS更容易维护。预处理是CSS的超集，包含一套自定义的语法和一个解析器，根据这些语言写义自己的样式规则，这些规则最终会通过解析器编译生成对应的CSS文件，因此不能直接在浏览器运行，浏览器也不识别。
预编译语言主要包含：Sass、Less和Stylus。
Less 是什么？
Less（Leaner Style Sheets 的缩写） 是CSS预处理语言的一种，它扩充了CSS语言，为CSS赋予了动态语言的特性，如：变量、继承、运算、函数等，更方便的编写和维护CSS，提高开发效率。
Less快速入门： https://less.bootcss.com/
Less官网： http://lesscss.cn/
1 安装Less
安装node.js 软件，官网：https://nodejs.org/en/ 。
检查nodejs是否安装成功，管理员身份运行 cmd，看到版本信息，即代表安装成功。
> node -v
// V16.18.0
用npm工具安装Less，再验证Less有没有安装成功，看到版本信息，即代表安装成功。
> npm install -g less
// 1 package is looking for funding
> lessc -v
// lessc 4.1.3 (Less Compiler) [JavaScript]
2 编译Less文件
编译前，需要先有一个Less文件。使用框架开发不用考虑Less编译为CSS。
2.1 命令行方式编译
2.1.1 未指定编译路径。编译完成后，会在控制台输出编译结果，但不会生成文件。
> lessc style.less
2.1.2 指定编译路径。编译完成后，会生成一个新的 style.css 文件，编译结果不会输出在控制台。
> lessc style.less > style.css
2.1.3 编译并压缩。需要借助 less-plugin-clean-css 插件，会生成同名压缩的CSS文件。
> npm install less-plugin-clean-css -g //先安装插件
> lessc style.less > style.css --clean-css //使用插件压缩CSS
2.2 外部工具编译
命令行的编译方式比较麻烦，每写一次Less，都需要手动编译一次。借用外部工具可以实时编译。
如考拉Less客户端编译工具，官网：http://koala-app.com/
可以选择压缩编译结果Compress，监听Less文件的变化，自动编译和生成资源地图文件。
2.3 开发工具编译
2.3.1 WebStorm
WebStorm内置File Wathchers，设置方式：
文件 > 设置 > 工具 > File Watchers > 添加选择less > 指定输出目录
2.3.2 VSCode
在VSCode中下载 easy less 插件，使用Less自动编译功能。
VSCode下载插件 > 写好Less文件保存 > 自动生成同名CSS文件
若要设置Less编译文件到指定目录，可以在插件扩展设置中，修改 settings.json 配置文件。
"less.compile": {
"compress": false, //是否压缩
"sourceMap": false, //是否生成map文件，有了这个可以在调试台看到less行数
// "out": true, // 是否输出css文件，false为不输出
"out": "${workspaceRoot}\\assets\\css\\", //输出路径
"outExt": ".css", // 输出文件的后缀
},其中 out 就是指定生成的路径，注意格式。其中 ${workspaceRoot}是当前项目路径。
Less怎么用？
1 注释
1.1 /**/ 多行注释
这种注释是CSS的注释，可单行，可多行，编译后会保留在CSS文件中。
1.2 // 单行注释
// 这种代码注释CSS并不识别，供我们在Less文件中注释，编译后不会显示在CSS文件中。
/* 这里单行注释 会显示在CSS中 */
/*
编译后会显示在CSS中
编译后会显示在CSS中
*/
// 这个注释只会显示在Less文件，编译后不会显示在CSS文件中
2 变更
在Less中，可以使用变量来统一设置一类可以重复使用的值，方便后期维护。
