必须用 @each 遍历光标数组生成预览类，因其语义清晰、不依赖索引、容错性强；@for 易因索引错误或未引号字符串导致编译失败，且调试不便。
直接用 @each 遍历光标值数组生成预览类，是最简单、最可靠的方式；别用 @for 或 @while，它们在这里纯属增加出错概率。
为什么必须用 @each 而不是 @for
@for 循环需要手动维护索引和数组长度，而光标类型是固定枚举值（如 "pointer"、"grab"），不是数字序列。用 @for $i from 1 through length($cursors) 不仅多写三行，还容易因 nth($cursors, $i) 取值失败导致编译中断——尤其当数组里混入空格或未引号字符串时。
-
@each $cursor in $cursors语义清晰，一次取一个值，不依赖下标 - SCSS 对
list的遍历支持稳定，不会因空值或类型杂乱崩掉整个循环 - 调试时
@debug $cursor直接输出当前值，比查nth(..., 2)快得多
$cursors 数组怎么定义才不出错
光标名必须全用双引号包裹，且不能含 CSS 不合法字符（比如 default 可以，但 not-allowed 必须写成 "not-allowed"）。Sass 会把没引号的 default 当作变量去解析，找不到就报 Undefined variable。
- 正确写法：
$cursors: ("default", "pointer", "grab", "move", "text", "wait", "not-allowed") - 错误写法：
$cursors: (default, pointer)——default被当变量 - 避免写
"auto"或"all-scroll"：部分旧版 Safari 渲染异常，建议先在目标环境实测
生成的预览类要能点、能 hover、能复制值
只写 cursor: #{$cursor} 是不够的。真实预览需要用户能直观看到效果，还要方便开发者复制值。所以每个类应同时设置：cursor、user-select: none（防误选文字）、::after 插入值文本。
- 必须显式声明
display: inline-block或block，否则cursor在内联元素上可能不生效 -
::after { content: "#{$cursor}"; }中的#{$cursor}必须加引号包裹，否则编译后变成裸字面量，浏览器当无效 content 处理 - 加
padding: 8px 12px和border: 1px solid #eee提升可点击区域，避免小光标难触发
如何避免和项目现有光标规则冲突
批量生成的预览类（如 .cursor-pointer）默认是全局作用域，一旦项目中已有同名工具类，就会互相覆盖。更糟的是，某些 UI 库（如 Ant Design）用 [role="button"] 强制设 cursor: pointer，优先级更高，你的类会被无视。
- 用命名空间前缀，比如
.demo-cursor-#{$cursor}，而非裸名.cursor-#{$cursor} - 在顶层加
.cursor-demo { ... }容器包裹，再用& .demo-cursor-#{$cursor}限定作用域 - 若需临时禁用第三方库影响，可在 demo 区域加
!important，但仅限演示，勿进生产代码
光标预览的核心不是“生成多少个类”，而是确保每个类在真实浏览器中行为一致；cursor 值本身不校验合法性，SCSS 编译器不会告诉你 "zoom-in" 在 Firefox 里不支持——得靠你手动在各端打开开发者工具，悬停看 computed 栏是否生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
