css处理器Less

一.Less

Less是一个CSS预处理器, Less文件后缀是less
扩充了CSS语言，使CSS 具备一定的逻辑性、计算能力
但是浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件
使用需在vscode中下载插件easy less：

在less文件中书写代码保存会自动生成对应的css文件

二.Less注释

单行注释：
语法: // 注释内容
快捷键: ctrl + /

块注释：
语法: / 注释内容/
快捷键: shift + alt + A

注意：单行注释只在less文件中可见，在生成的css中不可见

三.Less计算

运算：
加、减、乘直接书写计算表达式
除法需要给整体表达式添加小括号或 使用 ./
例子如下：

四.Less嵌套

作用:快速生成后代选择器
注意:&不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用
示例1（图一二为less文件，图三为生成的css文件）：

示例2：
less文件：

生成的css文件：

五.Less变量

变量:存储数据，方便使用和修改
语法：
定义变量:@变量名值
使用变量:CSS属性:@变量名
类似宏定义，以这个变量为属性值的所以子元素当需要修改时直接修改less变量名的值就行，使用时直接用变量名
例子如下：

六.Less导入与导出

less文件能导入另外一个less文件，less文件的导出路径也可以改变

1.Less导入

开发网站时，网页引入公共样式可以通过less导入生成相应网页的总css文件，在html中只需引入该文件，从而减少css文件的引入次数
语法： @import"文件路径";

2.Less导出

控制less文件生成的css文件的存放路径
如果设置的导出路径不存在，那么会自动生成对应文件夹与文件
方法一：
配置EasyLess插件，实现所有Less有相同的导出路径
配置插件 :设置一>搜索Easy Less 一>在setting.json中编辑一>添加代码： “out”:“文件路径” (注意，必须是双引号)
例子（文件夹需加/）：

方法二：
直接在要改变生成css文件的存放路径的less文件中的第一行添加代码：
//out: 文件路径
注意此时不用加双引号
例子：

3.Less禁止导出

不一定所有less文件都要导出定义css文件，比如基础样式与公共样式
那么可以设置在对应less文件设置禁止导出
运用如下：