1. Less预处理器
| 特性 | 说明 |
|---|
| 概念 | CSS预处理器，扩展了CSS的功能 |
| 核心特性 | 变量：使用@定义变量；嵌套：支持选择器嵌套；混合：可重用的样式代码块；运算：支持数学运算；注释：支持单行注释和块注释 |
2. Less注释
| 类型 | 语法 | 快捷键 |
|---|
| 单行注释 | //注释内容 | ctrl + / |
| 块注释 | /* 注释内容 */ | Shift + Alt + A |
3. Less变量
| 项目 | 说明 |
|---|
| 语法 | 定义变量：@变量名: 数据; 使用变量：CSS属性: @变量名; |
变量使用示例：
/* 定义变量 */
@myColor: pink;
@primary-color: #3498db;
@base-font-size: 16px;
/* 使用变量 */
.box {
color: @myColor;
}
a {
color: @myColor;
}
.container {
color: @primary-color;
font-size: @base-font-size;
}
4. Less运算
| 项目 | 说明 |
|---|
| 概念 | Less支持在CSS中进行数学运算，使CSS具备计算能力 |
| 支持的运算符 | +、-、*、/ |
| 运算规则 | 运算符两侧必须加空格；运算单位要统一 |
运算示例：
/* 定义变量 */
@base-width: 100px;
@base-color: #3498db;
/* 使用运算 */
.box {
width: @base-width + 50px; /* 150px */
height: @base-width * 0.5; /* 50px */
margin: @base-width / 2; /* 50px */
background-color: @base-color + #111; /* #45a9eb */
}
5. Less嵌套语法
| 项目 | 说明 |
|---|
| 基本结构 | 见下方代码块 |
| &符号的使用 | 表示当前选择器；代码写到&的大括号里面就表示不会生成后代选择器；用于伪类、伪元素和同级选择器 |
基本结构：
/* 父级选择器 */
.father {
// 父级样式
color: red;
/* 子级选择器 */
.son {
// 子级样式
width: 200px;
/* 更深层嵌套 */
a {
color: green;
/* 伪类嵌套 */
&:hover {
color: blue;
}
}
}
}
6. Less导入
| 项目 | 说明 |
|---|
| 作用 | 导入less公共样式文件 |
| 语法 | @import "文件路径"; |
| 提示 | 如果是less文件可以省略后缀 |
示例：
/* 导入带后缀的less文件 */
@import './base.less';
/* 导入省略后缀的less文件 */
@import './common';
7. Less导出
| 项目 | 说明 |
|---|
| 作用 | 指定编译后的CSS文件保存位置 |
| 写法 | 在less文件的第一行添加 // out: 存储URL |
| 提示 | 文件夹名称后面添加 / |
示例：
/* 导出到指定CSS文件 */
// out: ./index.css
/* 导出到指定文件夹 */
// out: ./css/
| 项目 | 说明 |
|---|
| Less禁止导出 | 防止某些less文件被单独编译成CSS文件 |
| 写法 | 在less文件第一行添加 // out:false |
示例：
/* 禁止导出当前less文件 */
// out:false
没用过，就是一种编译器，在CSS基础上加一点特性，编译成CSS，和js与ts的关系一样，懒得用，写原生CSS更习惯