extract() 函数仅支持静态字面量索引（如1、2），不接受变量、表达式或函数调用；索引从1开始；提取变量名不会自动求值；推荐用mixin模拟命名映射替代硬编码索引。
extract() 函数只能用于静态索引，不能用变量或计算值
Less 的 extract() 函数本质是编译期求值工具，它只接受字面量数字（如 1、2）作为索引参数。如果你传入变量（比如 @i）、表达式（如 1 + 1）或函数调用，Less 编译器会直接报错：error evaluating function `extract`: argument must be a number。
常见误用场景包括循环中动态取值、根据条件选属性、或试图用 length() 配合 extract() 遍历列表 —— 这些都不可行，因为 Less 没有运行时概念，所有列表操作必须在编译前完全确定。
实操建议：
- 只用
extract(@list, 1)、extract(@list, 2)这类硬编码索引 - 若需“动态”行为，改用 mixin + 参数展开（例如把列表拆成命名参数传入）
- 避免嵌套
extract(extract(...))：嵌套不增加灵活性，反而让调试更难
列表索引从 1 开始，不是 0
这是最容易踩的坑。Less 所有列表相关函数（extract()、length()、nth()）均采用 1-based 索引。写 extract(@colors, 0) 会返回 undefined，而 extract(@colors, 1) 才取到第一个值。
示例：
@colors: #f00 #0f0 #00f; @primary: extract(@colors, 1); // → #f00 @secondary: extract(@colors, 2); // → #0f0 @third: extract(@colors, 3); // → #00f
如果误用 0-based 思维，生成的 CSS 值会为空或触发 fallback 行为（如颜色失效），但 Less 编译器通常不会报错，问题会延迟暴露到浏览器渲染阶段。
extract() 返回的是值本身，不是带单位或引号的字符串
extract() 对列表元素做“原样提取”，不加引号、不补单位、不解析嵌套。这意味着：
- 提取
12px得到的就是数值12px，可直接用于font-size等属性 - 提取
"hello"（带双引号的字符串）得到的是带引号的字符串，可能引发 CSS 解析错误 - 提取变量（如
@red）时，extract()只返回变量名符号，**不会自动求值** —— 必须额外调用~~或用 mixin 展开
正确做法示例：
@red: #f00;
@palette: @red #0f0 #00f;
@main-color: extract(@palette, 1); // ❌ 得到 @red，不是 #f00
// 应改为：
.color { color: extract(@palette, 1); } // 编译失败
// 正确方式是避免在列表里存未求值变量
@palette: #f00 #0f0 #00f;
.color { color: extract(@palette, 1); } // ✅ 编译为 color: #f00;
替代 extract() 的更可靠方案：mixin + 参数匹配
当业务逻辑需要“根据名称/类型取值”（比如 get-color("primary")），硬靠 extract() + 数字索引既难维护又易出错。此时应放弃列表+索引模式，改用命名 map 模拟（Less 无原生 map，但可用 mixin 实现）：
.color-map(@key) when (@key = primary) { @value: #007bff; }
.color-map(@key) when (@key = success) { @value: #28a745; }
.get-color(@key) {
.color-map(@key);
@color: @value;
}
// 使用：
.example { color: .get-color(primary); }
这种写法虽稍长，但语义清晰、支持 IDE 跳转、可被 lint 工具检查，比一串 extract(@list, 2) 更可持续。
真正复杂的配置抽取，建议提前在构建层（如 Webpack Loader 或 PostCSS 插件）处理，而不是塞进 Less 编译逻辑里 —— Less 不是编程语言，它的“函数”只是语法糖，能力边界很明确。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
