# CSS

> 在当前仓库新增或修改 SCSS 样式时使用。适用于组件、页面或模块样式调整，要求输出合法 SCSS，并保持清晰的嵌套层级与结构。

- Skill: `ls1072502993/css` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add ls1072502993/css`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ls1072502993/css/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: ls1072502993 (https://skillmd.com/u/ls1072502993)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/ls1072502993/css

---


# SCSS 样式规则

## 规则执行方式（强制）

- 本 skill 一旦命中，本文件中的全部规则、流程、检查和交付条件默认全部执行，不得自行挑选或只执行部分内容。
- 仅允许跳过规则正文明确限定且当前条件不成立的条款；不得因改动小、只读文件、只回答问题或只执行命令而跳过已命中的规则。
- 多个 skill 同时命中时，叠加执行全部相关规则；交付前逐条确认已落实，未完成时不得宣告任务完成。

## 适用场景

- 在当前仓库内新增或修改样式代码时使用。
- 包括 Vue SFC 的 `style`、独立 `.scss` 文件，以及需要补充样式结构的场景。

## 必须遵守

- 严格输出合法 SCSS，不生成“看起来像嵌套、实际是普通 CSS 拼接”的写法。
- 优先使用 SCSS 嵌套结构表达层级关系，选择器层级与模板结构保持一致。
- 伪类、伪元素、状态类、修饰符统一使用 `&` 嵌套，例如 `&:hover`、`&::after`、`&.is-active`、`&--disabled`。
- 后代、子级、同级关系统一在当前父选择器内继续嵌套，不主动拍平成长选择器。
- 媒体查询、条件样式在所属模块内部嵌套，不单独拆到无关位置。
- 保持现有命名、层级和书写顺序，不为了“更规范”重构原有样式结构。

## 禁止事项

- 不生成无效或不完整的 SCSS 语法。
- 不把多个无关模块强行合并到同一层嵌套中。
- 不新增与任务无关的公共样式、变量、mixin、占位选择器或抽象封装。
- 不在可以直接嵌套表达的情况下改写为长链式扁平选择器。

## 示例

```scss
.card {
  padding: 24rpx;

  .title {
    font-size: 32rpx;
  }

  .action {
    color: #333;

    &:hover {
      color: #111;
    }

    &.is-disabled {
      color: #999;
    }
  }
}
```

## 执行提醒

- 除样式组织专属规则外，其余执行习惯继续遵循 `frontend-global`。
- 如果文件已存在 SCSS 组织方式，优先延续原有嵌套风格。