scss变量必须集中定义在非scoped样式中，卡片组件所有可变样式须通过css自定义属性（如--card-bg）配合var()使用，并依赖:root与主题class切换实现换肤，禁用硬编码和setproperty()。
SCSS变量必须集中定义在非scoped样式中
卡片组件里用到的所有颜色、圆角、阴影值，不能散落在每个.card的<style scoped></style>里。否则var(--card-bg)在scoped作用域下根本取不到值——Vue会自动加[data-v-xxx]属性选择器，把:root定义的变量挡在外面。
正确做法是：新建一个src/styles/_theme.scss（不带scoped），在里面统一定义：
$theme-light: (
card-bg: #fff,
card-border: #e0e0e0,
card-shadow: 0 2px 8px rgba(0,0,0,0.06)
);
$theme-dark: (
card-bg: #2d2d2d,
card-border: #444,
card-shadow: 0 4px 12px rgba(0,0,0,0.2)
);
:root {
--card-bg: map-get($theme-light, card-bg);
--card-border: map-get($theme-light, card-border);
--card-shadow: map-get($theme-light, card-shadow);
}
.theme-dark :root {
--card-bg: map-get($theme-dark, card-bg);
--card-border: map-get($theme-dark, card-border);
--card-shadow: map-get($theme-dark, card-shadow);
}
然后在main.js或全局入口中import './styles/_theme.scss'。
卡片SCSS需完全依赖var()，禁用硬编码颜色
写.card样式时，所有可变属性必须用var()，且带fallback（兼容旧浏览器或未定义场景）：
.card {
background-color: var(--card-bg, #fff);
border: 1px solid var(--card-border, #ddd);
box-shadow: var(--card-shadow, 0 1px 3px rgba(0,0,0,0.1));
border-radius: var(--card-radius, 8px);
}
注意：var(--card-radius)本身也要在:root里定义（哪怕只是默认8px），否则fallback会成为唯一值，换肤失效。
常见错误：
- 写成
background: linear-gradient(to right, var(--card-bg), #333)——渐变里混用var()和硬编码，换肤时只变一半 - 在
:hover里写死background: #f5f5f5，而不是background: var(--card-bg-hover, #f5f5f5)
动态切换必须操作HTML class，而非setProperty()
用户点击“深色模式”按钮时，执行的是：
document.documentElement.classList.toggle('theme-dark')
不是：
document.documentElement.style.setProperty('--card-bg', '#2d2d2d')
原因很实在：setProperty()只能改内联样式，而:root没有内联样式可写；它不报错，但也不生效。用class切换，CSS引擎会重新匹配.theme-dark :root规则，变量自然更新。
额外提醒：
- 别用
document.body.className = 'theme-dark'——会清空其他class（比如lang-zh或platform-desktop） - 记得在
mounted()里读取localStorage恢复上次主题，并同步设置document.documentElement的class
SCSS中避免嵌套过深的map-get链
如果你用map-get(map-get($themes, $current-theme), card-bg)这类写法生成初始:root变量，要注意编译时性能。Sass 本身不支持运行时查表，所有map-get都在构建阶段展开，所以没问题；但若后续想加“用户自定义色盘”，就得靠JS接管，此时SCSS只负责生成默认皮肤。
真正容易卡住的地方是CSS运行时计算：
- 别写
color: var(--text-primary, var(--text-base, var(--text-fallback)))三层嵌套fallback——部分Android WebView会降级失败 - 卡片内图标颜色如果也依赖主题，建议单独定义
--card-icon-color，而不是复用--card-text-color再叠加opacity - 暗色模式下
box-shadow的rgba黑值要调高（比如rgba(0,0,0,0.3)），否则在深灰背景上几乎看不见
最后一点实际经验：换肤不是改完变量就结束，务必在真实设备上测iOS Safari和微信内置浏览器——它们对:root + class切换的重绘有时有100ms延迟，需要加transition: background-color 0.2s来掩盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
