less 中没有 extract() 函数，其等效功能由 nth() 提供且仅支持逗号分隔列表；空格分隔列表需先转换格式，css 属性值无法运行时提取，应优先通过变量抽象复用。
Less 中没有 Extract 函数
Less 本身不提供 extract() 函数，这是 Sass 的内置函数（nth($list, $n) 或 map-get() 才是 Sass 的常用取值方式）。如果你在 Less 里写了 extract(@list, 1)，编译会直接报错：Unrecognised input 或 Function extract is undefined。
常见诱因是：从 Sass 项目迁移代码、查文档时混淆了预处理器语法、或依赖了错误的 Less 插件（比如误装了 sass-extract 类库）。
- Less 原生支持的列表操作仅限于
length()、extract()并不存在 - Less 的列表本质是空格/逗号分隔的值，不是真正的数组对象，无法索引访问
- 若强行用 JavaScript 方式写（如通过自定义函数），需配合 Less.js 的
registerPlugin，但生产环境极少这么做，且不兼容 CSS-in-JS 工具链
Less 中安全获取列表第 N 项的替代方案
Less 提供了 extract() 的等效能力——但名字叫 nth()，且只对逗号分隔列表有效（空格分隔会被视为多个独立参数）。
例如想从颜色集合中取第二个值：
@colors: red, blue, green; @primary: nth(@colors, 1); // red @secondary: nth(@colors, 2); // blue
注意：nth() 对空格分隔列表无效：
-
@sizes: 12px 14px 16px;→nth(@sizes, 2)会报错或返回undefined - 必须写成
@sizes: 12px, 14px, 16px;才能用nth() - 如果原始变量是空格分隔（如
@font-stack: Helvetica Arial sans-serif;），不能直接nth()，得先转成逗号分隔形式（通常靠 mixin 封装）
提取 CSS 属性值？Less 不支持运行时属性反射
你可能真正想做的是“从已有 CSS 规则中提取某个属性值复用”，比如把 .btn { color: #007bff; } 里的 color 拿出来赋给另一个变量。Less 无法做到这点 —— 它是编译时处理，不解析已生成的 CSS 输出，更不支持类似 JS 的 getComputedStyle。
可行路径只有两种：
- 手动维护变量：把值抽成顶层变量，所有地方引用它，例如
@link-color: #007bff;，再在.btn和其他地方用color: @link-color; - 用 CSS 自定义属性（CSS Custom Properties）+ JS 动态读取：Less 编译后生成
:root { --link-color: #007bff; }，JS 用getComputedStyle(document.documentElement).getPropertyValue('--link-color')获取，但这已脱离 Less 能力范围
容易被忽略的兼容性细节
nth() 在 Less 3.5+ 支持，但早期版本（如 2.x）不支持。如果你用的是旧版构建工具（如 grunt-contrib-less v1.x），nth() 会静默失效或报错。
- 检查 Less 版本：
lessc --version - Webpack 用户注意
less-loader默认绑定的 Less 版本，有时需显式安装less@4并配lessOptions - 逗号分隔列表中若含单位或函数（如
@gradients: linear-gradient(red, blue), radial-gradient(yellow, green);），nth()可正常取值，但要注意括号嵌套是否被正确解析
真正需要“提取属性值”时，大概率说明设计系统缺乏变量抽象，优先重构变量结构，而不是找取值技巧。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
