optimize-page-styles

What problem does it solve?

本技能旨在通过将 subPages 演示页面中的硬编码颜色、字号、间距和圆角替换为 Wot UI 设计系统的语义变量，从而实现统一的视觉风格和对暗色主题的自适应。通过不引入额外的 variable.scss，直接使用已全局注入的 Sass 变量或 CSS 自定义属性，消除手写的样式覆盖。

Core Features & Use Cases

• 语义变量替换：将颜色、排版和间距等硬编码值替换为 $text-main、$spacing-main、$radius-large 等变量，或对应的 CSS 自定义属性。
• BEM 命名规范：将类名统一改为 Block__Element / Block--Modifier 形式，提升可维护性和可读性。
• 暗色主题自动适配：移除手动的暗色主题覆盖块，由语义变量在主题切换时自动映射。
• 可选集成：支持直接使用全局注入的 variable.scss 变量，或使用 CSS 自定义属性，无需额外引入。

Quick Start

以目标 subPages 为出发点，将样式中的硬编码值替换为语义变量并将类名改为符合 BEM 的命名，以实现自动主题适配和风格统一。