应使用sass map定义颜色体系：$colors为语义键值对（如"primary": #3b82f6），通过@each生成.text-和.bg-类，注意插值语法与!important应用；扩展状态需嵌套@each；导出css变量须用@each配合:root，避免硬编码或json转换。
用 $colors 映射定义颜色体系，避免硬编码
直接写 .text-red、.bg-blue 很快就会失控——新增一个 indigo 就得补 6 个类。Sass 的 map 是唯一合理起点：$colors 必须是键值对结构，键是语义名（如 primary），值是合法 CSS 颜色（#3b82f6 或 rgb(59, 130, 246)）。别用嵌套 map，也别混用字符串和变量，否则 map-get() 会静默失败。
常见错误：把颜色名写成驼峰（darkBlue）或带空格（"light gray"），导致生成类名非法或无法被 CSS 解析；还有人用 !default 覆盖时没注意作用域，导致后续 map 合并出错。
@use "sass:map"; $colors: ( "primary": #3b82f6, "success": #10b981, "warning": #f59e0b, "danger": #ef4444 );
用 @each 遍历 map 生成 .text-* 和 .bg-*
别手写循环逻辑，Sass 原生 @each 最稳。关键点在于：键必须用 #{} 插值进选择器，值要传给 color 或 background-color；同时注意区分文本色和背景色的默认行为——文本色通常需要 !important 覆盖继承，而背景色一般不需要。
容易踩的坑：@each $name, $value in $colors 中的 $name 是字符串，不是变量名，所以不能直接当变量用；还有人漏写引号导致 Sass 报 Invalid CSS，因为 primary 被当成未定义变量而非字面量。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
@each $name, $value in $colors {
.text-#{$name} {
color: $value !important;
}
.bg-#{$name} {
background-color: $value;
}
}
扩展支持 hover、disabled 等状态变体
纯遍历不够，真实项目需要 .bg-primary:hover、.text-danger:disabled 这类组合。最简方案是再套一层 @each 遍历状态列表，但要注意顺序：先外层颜色，再内层状态，否则生成的 CSS 优先级会乱。
性能提示：每加一种状态，类数量呈线性增长（n × m），10 种颜色 + 4 种状态 = 40 个类。如果状态逻辑复杂（比如深色模式下需调整亮度），就该改用函数封装，而不是硬塞进循环里。
$states: ("hover": ":hover", "focus": ":focus", "disabled": ":disabled");
@each $name, $value in $colors {
@each $state-name, $state-selector in $states {
.bg-#{$name}#{$state-selector} {
background-color: $value;
}
}
}
导出颜色变量供 JavaScript 使用时，用 meta.load-css 而非 JSON
前端组件常需读取主题色，比如用 getComputedStyle 拿 --color-primary。别手动维护两套颜色值——Sass 5.0+ 支持 @use "sass:meta" + meta.load-css() 把 map 转成 CSS 自定义属性。这样 JS 读 getComputedStyle(document.documentElement).getPropertyValue("--color-primary") 才能和样式保持一致。
致命陷阱：用 JSON.stringify($colors) 会报错，Sass map 不是 JS 对象；还有人试图在 :root 里直接写 --color-primary: #3b82f6，结果没走 @each，新增颜色时忘了同步更新 CSS 变量。
@use "sass:meta";
:root {
@each $name, $value in $colors {
--color-#{$name}: #{$value};
}
}
生成的颜色类本身不重，但映射结构一旦嵌套过深、键名不规范、或和 JS 侧变量不同源，后期改主题色就会变成连环修 bug。真正难的不是写完这段 Sass，而是确保设计系统里所有颜色引用路径都指向同一个源头。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
