less学习笔记教程
less
介绍
中文网：https://less.bootcss.com/
Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。这里呈现的是 Less 的官方文档（中文版），包含了 Less 语言以及利用 JavaScript 开发的用于将 Less 样式转换成 CSS 样式的 Less.js 工具。
因为 Less 和 CSS 非常像，因此很容易学习。而且 Less 仅对 CSS 语言增加了少许方便的扩展，这就是 Less 如此易学的原因之一。
环境准备
vscode下载安装
学习less之前我们需要有学习less的环境，这里呢我们用到vscode，vsCode是一个轻量级的编辑器，微软开发，其中很多有大量插件，也是前端的一款广泛使用的编辑器。
介绍（来自百度百科）：
如果没有vscode，下载地址：https://code.visualstudio.com/
下载下来像qq一样安装即可，很简单，这里就不过多演示了；
下载完之后呢，我们只需要安装一个插件，就搞定了，看下图步骤：
安装完成新建一个less文件夹作为我们的工作目录：
快速上手
1、新建一个文件夹less01，在其中新建一个hello.less
2、在目录下，新建一个index.html文件，输入一个！出现提示，回车，可以快速生成一个html结构，我们在页面中引入hello.css，编写以下代码
hello.less代码
@width: 100px;@height: 100px;@boxColor:red;#box{ width: @width; height: @height; background-color: @boxColor;}css代码是经过预处理，自己不用编写，是这样的：
index.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>less01</title> <link rel="stylesheet" href="hello.css"></head> <body> <div id="box"></div></body></html>可以双击打开index.html页面，可以看到效果，这里再推荐一个好用的vscode插件Live Server，可以直接文件右键打开，即可运行到浏览器，这不是单纯的打开文件，而是在vscode中内置了一个服务器，通过服务器打开网页，应该运行会在浏览器中自动弹出网页，如果没有，在浏览器地址栏中输入地址http://127.0.0.1:5500/less01/index.html，即可访问
运行结果，你会得到一个100px正方形的红色小盒子：
变量
陆续更新中······