关于 css-math-units
用于追踪 CSS 值如何解析为计算后布局值的参考技能，面向调试或修改样式的开发者，涵盖单位换算、继承尺寸、`calc()`、自定义属性运算和盒模型尺寸。
主要功能
- 01CSS 单位换算
- 02继承尺寸计算
- 03`calc()` 与自定义属性运算
- 04盒模型尺寸指南
- 05调试流程与检查清单
适用场景
- 01追踪 CSS 值对应的计算尺寸
- 02调试嵌套或继承的尺寸
- 03审查 CSS 计算相关改动
- 04应用可复用的尺寸公式
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/css-math-units确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
guidelines.mdagents/openai.yamlreferences/source-map.mdreferences/css-calculations/checklist.mdexamples.mdknowledge.mdpatterns.mdrules.mdworkflows/debug-css-calculation.md详细介绍
CSS 数学单位
使用此技能追踪 CSS 值如何转换为计算后的布局值。适用于单位换算、继承尺寸乘法、calc 表达式、自定义属性运算和盒模型尺寸计算。
快速开始
- 阅读
guidelines.md，选择最精简的相关文件集。 - 加载
references/css-calculations/rules.md，了解实现决策。 - 编辑代码时，加载
references/css-calculations/examples.md。 - 对于多步推导或调试，使用
workflows/debug-css-calculation.md。
内容
| 资源 | 用途 |
|---|---|
guidelines.md | 将任务指向合适的参考文件 |
references/source-map.md | 书籍来源及章节／小节对应关系 |
references/css-calculations/knowledge.md | 核心概念和术语 |
references/css-calculations/rules.md | 实用规则、指南和例外情况 |
references/css-calculations/examples.md | 错误／正确示例和重构方法 |
references/css-calculations/patterns.md | 可复用的公式和实现模式 |
references/css-calculations/checklist.md | 审查清单和警示事项 |
workflows/debug-css-calculation.md | 分步工作流 |
来源
改编自 Paul McFedries 所著的 Math for Web Design，第 3 章：CSS 数学基础。
引文记录在 references/source-map.md 中。
评论
支持 Markdown