Less 教程

🧩 ​​一、Less 核心概念与安装​​

1. ​​Less 是什么？​​

• ​​CSS 预处理器​​：扩展 CSS 语言，支持变量、嵌套、混合（Mixins）、函数等编程特性，提升代码可维护性。
• ​​编译运行​​：浏览器无法直接解析.less文件，需编译为.css文件（如通过 VS Code 插件 Easy Less或 Node.js 命令行工具）。

2. ​​安装与编译​​

• ​​Node.js 安装​​：npm install -g less # 全局安装Less编译器
• ​​编译命令​​：lessc style.less style.css # 生成CSS文件
• ​​VS Code 插件​​：安装 Easy Less，保存.less文件自动编译为.css。

---

⚙️ ​​二、核心语法详解​​

1. ​​变量（Variables）​​

• ​​定义与使用​​：以 @开头，存储颜色、尺寸等重复值。@primary-color: #3498db; // 定义变量 .button { background: @primary-color; // 使用变量 }
• ​​作用域​​：遵循就近原则（局部变量覆盖全局变量）。

2. ​​嵌套（Nesting）​​

• ​​模拟 DOM 结构​​：减少重复书写父选择器。.nav { ul { li { color: blue; &:hover { color: red; } // &表示当前选择器 } } }
• ​​编译结果​​：.nav ul li { color: blue; } .nav ul li:hover { color: red; }

3. ​​混合（Mixins）​​

• ​​复用样式块​​：类似函数，支持参数和默认值。.border-radius(@radius: 5px) { border-radius: @radius; } .card { .border-radius(10px); // 调用混合 }
• ​​高级用法​​：
  • ​​命名参数​​：.mixin(@color: red, @size: 10px)。
  • ​​条件混合​​：结合 when关键字实现条件判断。

4. ​​运算（Operations）​​

• ​​数学计算​​：支持加减乘除，单位以第一个表达式为准。@base: 100px; .box { width: @base * 2; // 200px height: (@base / 2); // 50px（除法需括号） }

5. ​​函数（Functions）​​

• ​​内置函数​​：
  • ​​颜色处理​​：lighten(#3498db, 10%)（提亮）。
  • ​​数学计算​​：ceil(10.2px)→ 11px。
• ​​自定义函数​​：通过混合模拟函数行为。

6. ​​模块化与导入​​

• ​​文件拆分​​：通过 @import整合多个.less文件。@import "variables.less"; // 导入变量文件 @import "mixins.less"; // 导入混合文件

---

🚀 ​​三、高级特性与实战技巧​​

1. ​​映射（Maps）​​

• ​​结构化变量管理​​：类似键值对存储主题色。#colors() { primary: blue; secondary: green; } .header { color: #colors[primary]; // blue }

2. ​​继承（Extend）​​

• ​​减少重复代码​​：合并相同样式规则。.btn { padding: 10px; } .primary-btn:extend(.btn) { background: blue; }
• ​​编译结果​​：.btn, .primary-btn { padding: 10px; } .primary-btn { background: blue; }

3. ​​循环与条件​​

• ​​生成动态类名​​：.generate-columns(@n, @i: 1) when (@i <= @n) { .col-@{i} { width: (@i * 100% / @n); } .generate-columns(@n, (@i + 1)); } .generate-columns(4); // 生成.col-1到.col-4

---

🛠️ ​​四、最佳实践与工具​​

1. ​​项目结构示例​​：styles/ ├── variables.less // 全局变量 ├── mixins.less // 混合库 ├── components/ // 组件样式 └── main.less // 主入口（导入所有文件）
2. ​​调试技巧​​：
   • 使用 // out: false禁止特定.less文件编译输出。
   • VS Code 插件 Live Sass Compiler支持实时编译与错误提示。