sass列表是编译期数据结构，非字符串，不能直接作css值；需用append()追加、join()转串，且字体名须统一引号、分隔符含空格；断点等命名查找应使用map而非列表。
为什么不能直接把 Sass 列表当 CSS 值用
Sass 的 list 是编译期数据结构，不是字符串；CSS 属性值必须是纯文本。写 font-family: $my-fonts; 会输出类似 font-family: "Inter" "system-ui" "Segoe UI";（缺逗号、空格错乱），浏览器直接忽略或解析失败。
append() + join() 是字体栈拼接的最小可靠单元
追加字体必须走“构造 → 追加 → 转串”三步，跳过任一环节都出错：
-
append()第二个参数类型必须和原列表一致：全带引号（"Inter"）或全不带（Inter），混用会导致join()把 unquoted 元素转成关键字（如sans-serif变成sans-serif关键字而非字符串） -
join($list, ", ")的分隔符必须含空格（", "），否则输出"Inter","system-ui","Segoe UI"缺空格，虽合法但可读性差 - 含空格/斜杠的字体名（如
"PT Sans Narrow"、"Source Code Pro"）必须从一开始就用双引号包裹，否则 Sass 拆成多个 token，append()根本接不住
map-get() 配合 @each 才能安全遍历断点列表
别用 @for $i from 1 through length($breakpoints) —— Sass 列表索引从 1 开始，但断点本质是“名字→数值”映射，用 map 更准：
- 定义断点必须用
$breakpoints: ("sm": 576px, "md": 768px);，键名加引号，单位统一（全px或全rem） - 取值必须用
map-get($breakpoints, "md")，写成$breakpoints("md")或$breakpoints.md直接报错 -
map-get()查不到键时返回null，媒体查询变成@media (min-width: )，整条规则静默失效；建议封装函数加@if not map-has-key()校验
用 @each 生成工具类时，选择器里不能展开列表
想批量生成 .m-sm-2、.m-md-4 这类类名，不能写 .m-#{nth($breakpoints, $i)}-2 —— Sass 不允许在选择器中展开列表，会报 Invalid CSS：
- 正确写法是
@each $name, $width in $breakpoints { .m-#{$name}-2 { margin: 2px; } }，@each必须同时声明$name和$width，漏一个就会让$name接收到整个键值对 - 类名拼接必须用插值
#{$name}，不能写.m-$name-2（Sass 不解析变量名中的连字符） - 如果真需要从列表推导类名（比如响应式栅格列数），先用
map-keys($breakpoints)得到键列表，再用@each $key in map-keys($breakpoints)遍历，但注意：Sass 不允许在选择器中直接展开函数返回值，仍需插值
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
