str-insert 不能直接插入 CSS 属性值，因其返回带引号字符串，需配合 unquote() 才能生成合法 CSS token；且索引从 1 开始，越界会静默失败。
str-insert 为什么不能直接插入到 CSS 属性值里
str-insert 是 SCSS 的字符串处理函数，只在编译期运行，返回一个字符串字面量；它不会自动“注入”到 CSS 值中，更不会触发属性展开或动态计算。常见错误是写成这样：
@debug str-insert("url(", "logo.png", 4); // 输出: "url(logo.png"
看起来拼对了，但如果你试图把它塞进 background-image 里却没加引号或没配合 unquote()，编译器会报错或生成非法 CSS。
- SCSS 字符串默认带引号，
str-insert("a", "b", 1)返回"ab"（带双引号），而 CSS 中url("ab")是合法的，但color: "red"就不合法 - 想生成无引号的原始值（比如
flex-grow: 1中的数字、或url(...)内部路径），必须用unquote()包一层 -
str-insert的$index是从 1 开始计数，不是 JS 风格的 0 起始 —— 传0或负数会静默失败，返回原字符串
拼接 URL 路径时 index 容易算错导致截断
最典型场景是动态构造 url()：把基础路径和文件名拼一起。例如想从 "assets/" 和 "icon.svg" 得到 url("assets/icon.svg")。错误做法是：
// ❌ 错误：在 "assets/" 末尾插入，但 index 超出长度，str-insert 不报错却无效果<br>background-image: url(str-insert("assets/", "icon.svg", 8));
因为 "assets/" 长度是 7，传 8 就等于“插到末尾之后”，SCSS 会忽略该操作，返回原字符串 "assets/"。
立即学习“前端免费学习笔记（深入）”；
- 安全做法是固定用
str-length($base) + 1插入到末尾：str-insert($base, $file, str-length($base) + 1) - 如果要插在中间（比如替换扩展名），先用
str-index找位置，再用str-slice拆解，比硬算index更可靠 - 注意：Windows 路径反斜杠
在 SCSS 字符串里要写成\，否则会被转义成换行或警告
str-insert 和 unquote 配合才能生成有效 CSS 值
单纯拼字符串只是第一步，关键在怎么让它变成 CSS 可识别的 token。比如拼完路径后直接塞进 url()：
$path: str-insert("img/", "logo.png", 5); // → "img/logo.png"<br>background-image: url($path); // ✅ 合法，SCSS 自动加引号
但如果目标是生成类似 grid-area: "header" 这种带引号的值，或更危险的——生成类名或自定义属性名，就必须用 unquote()：
-
content: str-insert('"', 'hello', 1);→content: ""hello";（双引号嵌套，CSS 解析失败） - 正确写法：
content: unquote(str-insert('"', 'hello', 1));→content: "hello"; -
unquote()仅移除最外层引号，不处理内部转义；若字符串含空格或特殊字符（如/,-），仍需确保整体被 CSS 引号包裹或本身是合法标识符
替代方案：多数场景其实该用变量插值或 map.get
str-insert 适合简单拼接，但一涉及条件分支、多段组合或可维护性，就容易失控。比如动态生成响应式图片路径：
// ❌ 难读难改，且无法做 @if 判断<br>$src: str-insert(str-insert("img/", $name, 5), "@2x", str-length($name) + 5);
更稳妥的做法是用变量插值（#{} ）或提前组织好结构：
- 用插值：
url("img/#{$name}@2x.png")，语义清晰，无索引风险 - 用 map 存配置：
$images: ("logo": "logo@2x.png"); background-image: url(map-get($images, "logo")); - 真正需要
str-insert的场景极少：比如解析用户传入的不规范字符串、兼容旧命名约定、或构建 DSL 式工具函数
它的存在意义是补全字符串能力，不是日常拼接首选。用之前先问一句：这个逻辑是不是已经能用更直白的方式表达？
