less基础

1 简介

Less语法快速编译生成CSS代码
Less是一个CSS预处理器, Less文件后缀是.less
扩充了 CSS语言,使 CSS具备一定的逻辑性、计算能力。
注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。

2 编译插件

Easy Less :
vscode插件；作用：less文件保存自动生成css文件（ctl+s）

3 语法

3.1注释：

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

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

3.2运算：

加、减、乘直接书写计算表达式；除法需要添加小括号或 .

Ø 表达式存在多个单位以第一个单位为准
应用：使用Less运算写法完成px单位到rem单位的转换

3.3嵌套写法生成后代选择器

3.4Less变量设置属性值

存储数据，方便使用和修改。

语法：
先定义变量：@变量名:值;
再使用变量：CSS属性：@变量名;

3.5Less导入写法引用其他Less文件

@import“文件路径”;
导入后，再导出，css内容会合并

3.6导出CSS文件

方法一：
配置EasyLess插件，实现所有Less有相同的导出路径
配置插件：设置→搜索EasyLess→在setting.json中编辑→添加代码（注意，必须是双引号）

方法二：
控制当前Less文件导出路径
Less文件第一行添加如下代码,注意文件夹名称后面添加 /