今天学习了新的一种css书写方式，在此做一下笔记和记录.
对Less的认识
Less是一个css的预处理器，文件的后缀名是.less，和css的后缀是不一样的。 自己来理解的话Less更像是css的一种拓展，多了一定的计算能力和逻辑性。其他和css并没有太大的区别。（注意Less是不能直接引用到HTML文件里面的，因为浏览器的处理器不识别Less文件，目前阶段只能转换成相应的CSS文件使用。）
less语法
(1).Less的注释：Less的注释分单行注释和多行注释(也叫块级注释)。
单行注释语法：//注释内容
快捷方式：CTRL+/ (快捷方式和css注释的快捷方式一样）
多行注释语法：/*注释内容*/（注释语法和css一样）
快捷方式：SHIFT+ALT+A
(2).Less计算
Less对比css多了一定的计算和逻辑功能。
比如：width:50px + 50px;,转换成css文件就是width:100px;
减法：width:50px - 10px;,转换成css文件就是width:40px;
还有乘法的运用：width: 10px * 10px;,转换成css文件就是width:100px;
运用的最多的除法运算 widht:(20rem / 5px)；转换成css文件就是width：4rem；
除法运算和其他有不同需要添加括号，不然会报错，原因是因为斜杠的运用场景比较多所以在需要用括号包着。
（css也能实现这方面的功能不过需要添加函数属性比较麻烦。）
计算有几个需要的注意点：
计算会以第一个单位为准，比如10rem除以10px结果会以rem为单位。
运算符号和数值之间需要空格隔开，转换rem的时候前面的数值一般不带单位。
（3.）Less的嵌套方式
less对比css多了一种新的嵌套方式，子级元素可以套在父级元素里面。
这样使盒子的结构更加清晰，减少了重复书写的结构类名。
使用伪类选择器，伪元素的时候需要在选择器前面加一个&符号。
Less转换成css文件的插件
使用Less文件时需要一个vscode的插件让less文件转换成css文件，引入同名的css文件就OK了。
启用这个插件之后需要重启一下vscode，新建一个less文件写入一些样式，保存一下他就会自动生成一个同名的css文件，这就是编译完之后的less文件。在HTML文件中链接这个同名的css文件。
Less的变量
什么是变量：把属性值提前存储到一个容器，设置属性值为这个容器名。
变量最大的优点是：方便使用和修改。
语法：@变量名: 值;
@fontSize: 16px;
Less的导入
less的导入实际 是 less 文件的导入。
语法1：@import './变量.less'; (推荐使用语法1）
语法2：@import url(./变量.less);
一般导入的less样式写在最上面，因为导入less文件相当于导入那个文件的样式，最后生成的总体css文件具有层叠性放在下面容易被覆盖掉，所以需要放在最上面
使用less导入的好处是： 减少了html页面 的 link标签数量。
Less的导出
Less文件第一行添加如下代码, 注意文件夹名称后面添加 /
这样less文件就会导出css样式的文件了。和前面用插件导出是一样的。
以上就是Less语法的所有内容，感谢观看！
