CSS 变量提取

CSS Token Extractor

从样式表里把颜色、间距、圆角和字体值抽出来，并提议一套自定义属性。

读取一份样式表，数出里面的每个颜色、长度、圆角、字体和阴影，并为每一个提议一个 `--variable`，按使用频率排序。然后它可以改写样式表来使用它们。它是建立在 CSS 格式化工具的分词器上的声明扫描器，不是完整的解析器，也不是 linter——它告诉你文件里有哪些值，这是手动做起来乏味的那部分。

🔒 完全在你的浏览器里运行csstokensdesign-systemrefactor

CSS 输入

把 .css 文件拖进来

只在这个标签页里读。

建议的令牌

前缀（可选）

加在前面，像 --app-color-1 那样。

:root {
  /* 색 */
  --color-1: #6366f1;
  --color-2: #fff;
  --color-3: #1f2937;
  --color-4: rgba(0,0,0,.06);
  --color-5: rgba(0,0,0,.08);
  --color-6: #111827;
  --color-7: #4b5563;
  --color-8: #4f46e5;
  --color-9: #eef2ff;
  --color-10: #4338ca;
  --color-11: #e5e7eb;
  /* 글꼴 */
  --font-pretendard: "Pretendard", system-ui, sans-serif;
  /* 글자 크기 */
  --text-1: 12px;
  --text-2: 14px;
  --text-3: 20px;
  /* 행간 */
  --leading-1: 1.6;
  /* 간격 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  /* 모서리 */
  --radius-1: 8px;
  --radius-2: 12px;
  --radius-3: 999px;
  /* 그림자 */
  --shadow-1: 0 1px 2px rgba(0,0,0,.06);
  --shadow-2: 0 8px 24px rgba(0,0,0,.08);
}

声明

颜色

间距值

圆角

字体

本来就有的变量

颜色 11

#6366f1×2
#fff×2
#1f2937×1
rgba(0,0,0,.06)×1
rgba(0,0,0,.08)×1
#111827×1
#4b5563×1
#4f46e5×1
#eef2ff×1
#4338ca×1
#e5e7eb×1

间距 5

4px×1
8px×3
16px×4
24px×3
32px×1

圆角 3

8px×1
12px×1
999px×1

字号 3

12px×1
14px×2
20px×1

行高 1

1.6×1

字体 1

"Pretendard", system-ui, sans-serif×1

阴影 2

0 1px 2px rgba(0,0,0,.06)×1
0 8px 24px rgba(0,0,0,.08)×1

它是怎么读这个文件的

· 用 CSS 格式化工具的分词器来读，所以url()、字符串里的 #fff 都不会被当成颜色，calc() 也原样留着。
· 颜色统一归到十六进制，所以 #FFF、white 和 rgb(255 255 255) 会并成一条，并带上出现次数。名字按使用频率编号，所以 --color-1 一般就是品牌色或正文色——记得自己改名。
· 间距只从 margin、padding、gap 和 inset 系列里取，圆角只从 border-radius 里取，按大小编号。width 和 height 不算进来：它们是尺寸，不是节奏。
· JSON 用的是 W3C Design Tokens（DTCG）草案的形状，带 $type 和 $value。“改写成 var() 的 CSS”只替换完全相同的值，其他字符一个都不动。

想拿抽出来的某个颜色做一套色阶，色阶生成能做；要深色模式就用深色模式配色转换。

怎么用

粘贴样式表，或拖入文件
一次一个文件。最先加载的示例是为了在你去找自己的 CSS 之前先展示输出的形状。
先读计数，再读 token
一个本该有十二种颜色的文件里有四十种，这就是发现。下面的分组列表显示每个值和它出现的次数，所以值得命名的在顶部，而一次性的——通常是错误或死规则——在底部。
项目需要的话设一个前缀
留空给出 `--color-1`；输入 `app` 给出 `--app-color-1`。无论哪种，数字是使用排名而不是含义，所以弄清每个值是干什么的之后要重命名它们。
取变量、JSON，或改写后的文件
CSS 输出是一个粘到顶部的 `:root` 块。JSON 是 W3C Design Tokens 草案的形状，给构建步骤或设计工具用。改写是原样式表，只把精确匹配的值换成 `var()`，其他一概不动——提交之前读一下差异。