Sublime Text 通过插件实现 CSS 静态辅助（非实时调试），核心是 Pixel Ruler 测量设计稿像素值、Eyedropper 提取颜色并转格式、Color Highlighter 实时预览颜色，提升设计还原精度与效率。
Sublime Text 本身不支持运行时 CSS 调试（如浏览器开发者工具那样的实时盒模型高亮、元素悬停检测），但它可以通过插件辅助静态 CSS 编写与排查，尤其适合快速测量设计稿像素值、提取颜色、比对间距和尺寸。关键在于「辅助定位」而非「动态调试」。
安装像素标尺插件（Pixel Ruler）
用于在 Sublime 编辑器内直接测量图像或截图上的像素距离，特别适合对照 UI 设计稿（如 PNG/Sketch 导出图）校验 margin/padding/width 等数值是否准确。
- 通过 Package Control 安装 Pixel Ruler（搜索即可）
- 打开一张含 UI 布局的图片（如设计稿截图），按 Ctrl+Shift+P（Win/Linux）或 Cmd+Shift+P（Mac），输入 Ruler: Toggle 启动标尺
- 鼠标拖拽拉出标尺线，松开后显示两点间像素距离（支持水平/垂直/斜向）
- 标尺可锁定、缩放适配、切换单位（px/rem 默认 px），适合逐项核对 CSS 声明值
集成颜色选择器（Color Highlighter / Eyedropper）
快速提取设计稿或网页截图中的颜色值，并自动转换为常用格式（#RRGGBB、rgb()、hsl()、甚至 Tailwind 类名），避免手动查色、输错十六进制。
- 推荐组合：Color Highlighter（高亮编辑器中所有颜色值并预览） + Eyedropper（取色器，支持从屏幕任意位置取色）
- 安装后，用 Ctrl+Shift+C（或 Cmd+Shift+C）呼出取色器，点击屏幕任意点，自动复制颜色值到剪贴板
- 粘贴进 CSS 文件时，插件常自动补全为标准格式（如 #3b82f6 → 可选转成 rgb(59, 130, 246) 或 bg-blue-500）
- 配合 Color Highlighter，CSS 中已写的颜色会实时渲染小方块预览，一眼识别重复色、异常色或未统一的色调
搭配使用技巧：从设计稿到代码的闭环
不是替代浏览器调试，而是把「设计还原」环节前移到编码阶段，减少来回切换和猜测。
- 将设计稿切片或全图置为 Sublime 的背景图（需插件如 Background Image），开启 Pixel Ruler 测量间距，同时用 Eyedropper 提取按钮色、文字色
- 在 CSS 中写好类名后，用 Color Highlighter 检查是否所有 .btn-primary 都用了同一色值，避免手误写成 #3b83f6
- 对齐问题？用标尺测设计稿中元素左边界到容器的距离，再检查 CSS 中 margin-left / padding-left / flex justify-content 是否匹配
基本上就这些——Sublime 的 CSS 布局辅助，重在「精准输入」和「视觉对齐」，不复杂但容易忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
