鸿蒙arkts中@styles和@extend可模拟css变量语义：@styles封装通用属性（如宽高、背景色），需预设多组样式；@extend通过函数参数接管组件专属属性（如text.fontsize），支持运行时传值；动态主题色需结合attributemodifier与color.fromrgb()实现。
为什么直接写 .card 类名会卡在主题切换和状态组合上
你写了 .card，也加了 .card:hover 和 .card.is-error，但一换深色模式就失效，或者加个 data-loading 状态就得补三行新规则——根本原因不是选择器没写全，而是样式逻辑被硬编码进类名里，失去了“配置入口”。CSS 变量才是让组件响应式、可配置的最小成本方案。
- 所有颜色、圆角、阴影强度、过渡时长这些可能随主题/状态变化的值，必须抽成
--card-bg、--card-border-radius、--card-shadow这类变量 - 变量声明位置很关键：放在
:root里全局可用，但 IE11 不支持；更稳妥的是在组件选择器内声明，比如.card { --card-bg: #fff; }，再用inherit或级联向下透传 - 别在变量值里写
!important，它会锁死下游覆盖能力；需要用更高权重要么加类名前缀（如.card--compact），要么靠嵌套层级（如.card.card--dark）
@apply + CSS 变量怎么配合才不破坏 Tailwind 的原子性
Tailwind 用户常误以为 @apply 是万能胶水，结果把一堆带变量的规则塞进 .btn-primary，最后发现 md:hover:bg-blue-700 和 var(--btn-hover-bg) 冲突，响应式断点失效。真正可控的做法是分层接管：
- 基础工具类仍走 Tailwind 原生路径（
flex、p-4、rounded-lg），它们不参与主题配置 - 可变部分只用变量：把
bg-blue-500换成background-color: var(--btn-bg, #3b82f6);，再通过 class 控制变量值：<button class="btn btn--primary"></button>→.btn--primary { --btn-bg: #3b82f6; } - 伪类状态不要在
@apply里写死hover:，改用&:hover { background-color: var(--btn-hover-bg, #2563eb); }，这样.btn--danger:hover就能自动继承对应悬停色
鸿蒙 ArkTS 里 @Styles 和 @Extend 怎么接住 CSS 变量语义
鸿蒙不支持原生 CSS 变量，但 @Styles 和 @Extend 可以模拟出类似效果。关键不是“复用样式”，而是“复用配置意图”：
-
@Styles适合通用属性封装（宽高、边距、背景色），但它的参数不能动态传入颜色值——所以得提前定义好几组预设：@Styles cardDefault() { .backgroundColor(Color.White) .borderRadius(8) }，再靠 class 切换 -
@Extend才能接管组件自有属性（如Text.fontSize、Button.backgroundColor），此时要把变量逻辑下沉到函数参数：@Extend function textMedium(@size: number = 16) { .fontSize(@size) }，调用时Text("标题").textMedium(18) - 如果真需要运行时颜色注入（比如从服务端取主题色），就得用
AttributeModifier配合Color.fromRGB()动态计算，而不是依赖静态样式函数
Less mixin 里怎么安全地桥接 CSS 变量与参数
Less 的 @color 参数和 CSS 的 --color 变量不是一回事，混用容易导致编译期变量被忽略、运行时变量未定义。正确桥接方式是明确分工：
- Less 参数负责构建初始样式骨架（如
.card(@radius: 8px) { border-radius: @radius; }），它在编译时确定，适合固定值 - CSS 变量负责运行时可变部分（如
.card { --card-shadow: 0 2px 8px rgba(0,0,0,0.1); }），它在浏览器中生效，适合主题/状态切换 - 两者结合时，用 Less 输出变量声明：
.card(@bg: #fff) { --card-bg: ~"#{@bg}"; background-color: var(--card-bg); }，注意~""防止引号被转义 - 千万别在 Less 里写
color: var(--text-color, @default-color)——@default-color 是编译期值，而var()是运行时函数，二者生命周期不重叠
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
