Less 预处理器概述
Less 是一种动态样式语言，属于 CSS 的扩展。它增加了变量、嵌套规则、混合（Mixins）、运算等功能，让 CSS 更易于维护和扩展。
客户端使用方式
在浏览器端直接编译 Less 文件通常用于开发环境或原型演示。需要注意的是，这种方式依赖 JavaScript 库在用户浏览器中实时编译，可能会影响性能，且容易遇到跨域问题。
启动服务器模式
由于浏览器的安全策略，直接通过本地文件系统加载资源可能触发 CORS（跨域资源共享）限制。因此，建议配合简单的本地服务器启动服务，而不是直接打开 HTML 文件。
- 引入 Less.js 脚本。
- 在 HTML 中链接 Less 文件时，需指定
rel="stylesheet/less"和type="text/less"，否则浏览器无法识别。 - 确保 Less 文件路径正确，避免跨域报错。
<link rel="stylesheet/less" type="text/less" href="style.less">
<script src="less.min.js"></script>
基础语法示例
在 .less 文件中定义变量并应用：
@width: 200px;
@height: 200px;
div {
width: @width;
height: @height;
background: red;
}
服务端使用方式
在生产环境中，通常采用服务端构建流程，将 Less 编译为静态 CSS 文件，减少浏览器负担。
安装依赖
可以通过 npm 包管理器将 Less 安装到项目依赖中，或者全局安装以便在命令行调用。
npm install less --save
核心语法详解
1. 混合（Mixins）
混合允许我们将一组属性复用，类似于函数。是否加括号决定了该混合是作为类名输出还是仅作为代码块被引用。
// 不加括号会生成 .one 类
.one {
width: 200px;
: ;
}
{
;
}
() {
: ;
}
{
(red);
}
( = red) {
: ;
}
{
();
}
