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)