SuperAPI AI 工具集

bem-scss

前端与建站

查看项目

更新于 10-15 22:12

技能介绍

用途:创建或更新组件 SCSS 样式,或将样式重构为 BEM 加严格嵌套的写法,并确保能通过 toolbox 访问设计令牌与变量。该技能仅作用于组件样式(Angular 的 .scss 与 .html),当 Angular 任务涉及组件 SCSS 或模板类名时,可与 angular-standards 技能配合使用,且样式规则以本技能为准。

主要能力与规则:BEM 用于块、元素、修饰符;嵌套最多 4 层;每个 SCSS 文件顶部必须写 @use 'toolbox' as *;;使用系统令牌、变量与 CSS 变量,避免固定值;保持 ITCSS 结构;只为 HTML 中存在的类创建样式并删除未使用样式;清理仅限组件样式,不改动全局 ITCSS、令牌、mixin、function;在两者皆可时优先 @extend 而非 @include;避免块外的松散选择器。

使用方式:打开组件 SCSS,确认顶部导入;确定主 BEM 块;将元素转为 &__element、修饰符转为 &--modifier 的嵌套;控制嵌套层级;使用已有令牌与变量;新增样式放入正确的 ITCSS 层;核对 HTML 与 SCSS 类名一致。

限制:不修改全局样式结构;若必须使用全局选择器,需说明原因并尽量缩小范围。资料未提供安装命令、收费与平台信息。