不能。extract是Less内置函数，仅用于从空格或逗号分隔的列表变量中按1-based索引取值，不解析CSS选择器、类名或样式文本，对非列表参数会报错。
extract函数能直接提取CSS类名或选择器里的值吗
不能。extract 是 Less 的内置函数，只作用于 Less 列表（list）变量，比如用空格、逗号分隔的值序列，和 CSS 选择器、类名、属性值完全无关。它不解析样式文本，也不读取 DOM 或 CSSOM。如果你试图对 .btn-primary 或 color: red 这类字符串调用 extract，Less 编译会直接报错：TypeError: extract() expects a list。
常见误用场景：
- 把 CSS 规则字符串（如
"1px solid #ccc"）当成列表传给extract—— 实际上这是单个字符串，不是列表 - 想从
@import的样式文件里“提取”某个值 ——extract不具备文件解析能力 - 期望它像 JavaScript 的
match()一样做正则抽取 —— 它只是按索引取值，不支持模式匹配
如何正确构造并使用列表供extract调用
必须先定义一个合法 Less 列表变量，再用 extract 按 1-based 索引取值。列表可用空格或逗号分隔，但语义不同：
- 空格分隔 → 默认生成「空间分隔列表」（space-separated list），常用于
margin、box-shadow等多值属性 - 逗号分隔 → 生成「逗号分隔列表」（comma-separated list），常用于
transform、background等需逗号分隔的函数参数
示例：
@padding-values: 8px 12px 16px 20px;
@colors: red, blue, green;
.btn {
padding: extract(@padding-values, 2); // → 12px
border-color: extract(@colors, 3); // → green
}
注意：索引从 1 开始；越界返回 undefined（编译时静默失败，可能引发后续计算错误）。
实现多参数灵活配置的关键：嵌套列表 + 循环 + extract组合
单一 extract 只能取一个值，要支持「多参数动态组合」（如按钮有 size / variant / radius 三组预设），得靠嵌套列表结构 + .each 或 for 循环驱动。
典型做法：
- 用二维列表模拟配置表，例如
@button-configs: "sm" 4px red, "md" 8px blue, "lg" 12px purple; - 在循环中对每行用
extract拆出字段：extract(@row, 1)取尺寸，extract(@row, 2)取圆角，extract(@row, 3)取颜色 - 配合
selector-replace或拼接类名生成对应 CSS 规则
风险点：嵌套过深时，extract 对子列表的索引容易错位；建议用 length() 校验每行字段数是否一致，避免静默截断。
extract在真实项目中的替代方案更常用
实际工程中，纯靠 extract 做多参数配置很快会失控——难以 debug、无法类型提示、不支持默认值回退。更健壮的做法是：
- 用
map-get+ 嵌套 map 替代列表：例如@button: (sm: (pad: 8px, bg: #eee), md: (pad: 12px, bg: #ddd));，再用map-get(map-get(@button, sm), pad) - 将配置抽成 JSON 文件，通过插件（如
less-plugin-functions）注入为 Less 变量 - 复杂逻辑移交构建时 JS 处理（如用 PostCSS 插件生成 Less 变量），避开 Less 函数能力边界
extract 真正适合的场景很窄：临时拆解一组固定长度的原子值，且不涉及条件分支或 fallback。一旦配置项超过 3 个，或需要「某个参数缺失时用默认值」，就该换方案了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
