CSS预处理器LESS
LESS是一种CSS预处理器，它扩展了CSS的功能，通过引入变量、嵌套规则、Mixins（混合）、函数等特性，使得CSS的编写更加灵活和高效。以下是LESS的一些常用方式：
1. 变量
LESS允许定义变量，并在整个样式表中复用这些变量。这有助于减少代码的冗余，并在需要修改样式时快速更新所有相关部分。
- 语法：使用
@符号定义变量，如@primary-color: #333;。 - 使用：在需要的地方直接引用变量名，如
color: @primary-color;。
2. 嵌套规则
LESS支持选择器嵌套，使得代码结构更加清晰，减少了代码的冗余。
- 语法：将子选择器直接嵌套在父选择器内部，如
.parent { .child { color: red; } }。 - 优势：减少了代码量，同时使得样式之间的层级关系更加明确。
3. Mixins
Mixins是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。LESS中的Mixins支持参数传递和条件判断等高级功能。
- 无参数Mixins：直接引用Mixins名称，如
.mixin-name;。 - 带参数Mixins：在Mixins名称后添加括号和参数，如
.mixin-name(param1, param2);。 - 默认参数：可以为Mixins的参数设置默认值，如
.mixin-name(@param: default-value);。
4. 函数和运算
LESS提供了丰富的内置函数和运算能力，如颜色处理、字符串操作等。
- 颜色函数：如
lighten()、darken()等，用于调整颜色的亮度和暗度。 - 数学运算：LESS支持基本的数学运算，如加（+）、减（-）、乘（*）、除（/）等，可以直接在属性值中使用。
5. 导入
LESS支持通过@import语句导入其他LESS文件或CSS文件，便于模块化管理和复用代码。
- 语法：
@import "filename";，其中filename可以是LESS文件或CSS文件的路径。 - 选项：LESS的
@import语句还支持一些选项，如reference（仅引用不编译）、once（防止重复导入）等。
6. 注释
LESS支持两种注释方式：单行注释和多行注释。
- 单行注释：使用
//开头，编译后不会出现在CSS文件中。 - 多行注释：使用
/* */包围，编译后会出现在CSS文件中。
7. 命名空间和条件表达式
LESS虽然没有直接支持命名空间和传统的if-else条件语句，但可以通过Mixins和when语句实现类似的功能。
- 命名空间：可以通过Mixins的命名和组织来实现命名空间的效果。
- 条件表达式：LESS提供了
when语句，可以根据条件来包含或排除Mixins中的属性。
8. 编译
LESS文件需要通过LESS预处理器编译成标准的CSS代码后，才能被浏览器解析和显示。编译过程可以在服务端进行，也可以在客户端通过JavaScript库（如less.js）进行。
Less 快速入门 | Less.js 中文文档 - Less 中文网 (bootcss.com)