为什么要学习LESS?
就是为了少写代码啊！
LESS是CSS的预处理语言，在CSS语言的基础上，进行了语法扩展。
增加了变量、继承、函数等功能，让CSS代码书写更简洁，提高代码复用性、逻辑性，在管理大型项目时更容易修改和维护。
同时，相对于其它预处理语言，LESS也更容易学习和使用。
如何在我的项目中使用LESS?
LESS是CSS的预处理语言，使用它的目的是最终产出CSS代码，所以LESS并不能被HTML直接调用，需要先进行编译后，生成最终CSS文件，在放到HTML中使用。
这个过程是不是很麻烦？在没有使用LESS前，很多人会这样想。
但其实并不麻烦，现在你可能通过VS Code + Easy LESS插件来使用快速开发调试。
开发工具配置
1.在VS Code扩展中查找Easy LESS，并安装，安装后重启动VS Code。
2.重启后，在次进入扩展，点击Easy LESS右下的齿轮，进行扩展设置，点击在Settings.json中编辑，在json中输入如下内容。
{
"typescript.locale": "zh-CN",
"less.compile": {
"compress": false,//是否进行压缩
"sourceMap": true,//是否生成map文件
"out": true, // 是否输出css文件
"outExt": ".css", // 输出文件后缀,小程序开发'wxss'
}
}
第一次使用LESS
1.在VS Code中新建一个文件夹，创建一个文件index.html，输入如下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="Style.css">
</head>
<body>
<div class="layout">
<div class="header"></div>
</div>
</body>
</html>
2.在创建一个文件Style.less，输入如下内容：
@x:100px;//变量
@y:@x+100px;//运算
@color:rgb(228, 161, 17);
.layout{
width: @x * 2;
height: @y * 2;
background-color: @color;
.header{
width: 100px;
height: @y;
background-color: @color+#999;
}
}
3.当你保存Style.less文件时，会自己创建出Style.css和Style.css.map两个文件，Style.css就是最终通过LESS语法创建的CSS文件，Style.css.map是你在通过浏览器调试时，告诉浏览器CSS对应Less文件的代码位置，方便调试使用。
LESS基础知识
变量（Variables）
使用@+名称定义和使用变量
@width: 10px;
@height: @width + 10px;
#header {
width: @width;
height: @height;
}
编译为：
#header {
width: 10px;
height: 20px;
}
混合（Mixins）
将一组属性混入到另一个规则集的方法。
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
.bordered();
}
嵌套（Nesting）套娃模式
Less 模仿了 HTML 的组织结构进行书写。
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
运算（Operations）
算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。
注释（Comments）
/* 一个块注释
* style comment! */
@var: red;
// 这一行被注释掉了！
@var: white;
导入（Importing）
@import "library"; // library.less
@import "typo.css";
