Less

介绍

在px单位转换到rem单位过程中，除法运算难。CSS不支持计算写法。可以通过Less实现。

• Less是一个CSS预处理器，Less文件后缀是.less。扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力
• 注意：浏览器不识别 Less 代码，目前阶段，网页要引入对应的 CSS 文件
• VS Code 插件：Easy LESS，保存 less文件后自动生成对应的 CSS 文件
• less注释：
  • 单行注释：语法：// 注释内容，快捷键：ctrl + /
  • 块注释：语法：/* 注释内容 */快捷键： Shift + Alt + A

less – 运算

• 加、减、乘直接书写计算表达式
• 除法需要添加 小括号 或 . 注意：表达式存在多个单位以第一个单位为准

.box { width: 100 + 50px;height:5 * 32px;width:(100/4px);height:100./4px; }

less – 嵌套

作用：快速生成后代选择器.父级选择器{ .子级选择器{}}

.father { color: red; .son { width: 100px; } }

提示：用 & 表示当前选择器，不会生成后代选择器，通常配合伪类或伪元素使用

.father { color:red;} .father:hover{ width:100px; }
.father { color: red; &:hover { width: 100px; } }

less – 变量

概念：容器，存储数据
作用：存储数据，方便使用和修改
语法：
定义变量：@变量名: 数据;
使用变量：CSS属性：@变量名;

// 定义变量
@myColor: pink;
// 使用变量
.box {
color: @myColor;
}
a {
color: @myColor;
}

less – 导入

作用：导入 less 公共样式文件
语法：导入: @import “文件路径”;
提示：如果是 less 文件可以省略后缀

@import './base.less';
@import './common';

less – 导出

写法：在 less 文件的第一行添加 // out: 存储URL
提示：文件夹名称后面添加 /
// out: ./index.css
// out: ./css/

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