1、less-简介

• less是一个CSS预处理器，Less文件后缀是.less。扩充了CSS语言，使CSS具备一定的逻辑性、计算能力
• 注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件
• VS code插件：Easy LESS，保存less文件后自动生产对应的CSS文件

2、less体验

less文件

.father {color: red;width: (68 / 37.5rem);.son {height: (29 / 37.5rem);}
}

自动生成css文件

.father {color: red;width: 1.81333333rem;
}
.father .son {height: 0.77333333rem;
}

2.1 less-注释

注释：

• 单行注释
  • 语法：// 注释内容
  • 快捷键：ctrl + /
  • 注意：单行注释没办法生成css
• 快注释
  • 语法：/* 注释内容*/
  • 快捷键：shift + alt + A

// 单行注释/* 这是块注释允许换行
*/

 2.2 less-运算

运算：

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

.box {width: 100 + 20px;width: 100 - 80px;width: 100 * 2px;// 除法 / → (计算表达式) 或 ./ → 推荐（）width: (68 / 37.5rem);width: 29 ./ 37.5rem;// 如果表达式有多个单位，最终css里面以第一个单位为准height: (29px / 37.5rem);
}

 2.3 less-嵌套

作用：快速生成后代选择器

.father {color: red;.son {width: 200px;a {color: green;// & 表示的是当前选择器，代码写到谁的大括号里面就表示谁 → 不会生成后代选择器// 应用：配合hover伪类或nth-child结构伪类使用&:hover {color: blue;}}// a:hover {//   color: orange;// }}
}

2.4 less-变量

概念：容器，存储数据

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

语法：

• 定义变量：@变量名：数据;
• 使用变量：CSS属性：@变量名;

 

// 1. 定义变量
@myColor: green;// 2. 使用变量
div {color: @myColor;
}p {background-color: @myColor;
}a {color: @myColor;
}

2.5 less-导入

作用：导入less公共样式文件

语法：导入：@import "文件路径";

提示：如果是less文件可以省略后缀

@import "./08-less-体验.less";
@import "./09-less-注释";

2.6 less-导出

写法：在less文件的第一行添加 // out: 存储URL

提示：文件夹名称后面添加 /

// out: ./mycss/index.css// out: ./css/// out: ./index.css

2.7 less-禁止导出

写法：在less文件第一行添加：// out: false