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文件第一行添加如下代码,注意文件夹名称后面添加 / 
|