直接用CDN引入Open Props需显式指定版本号，如<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/open-props@12.2.0/index.min.css">，漏写或错写版本将404；不支持@latest，npm安装无可用CSS入口，变量为纯数值，响应式须手动结合媒体查询使用。
直接用 CDN 引入 index.min.css 就能立刻获得一套语义清晰、分组明确、开箱即用的 CSS 变量系统，不需要构建工具、不写 JS、不配 Tailwind —— 它不是框架，只是把标准化的 :root 变量批量注入全局作用域。
怎么引入才不会 404 或失效
Open Props 的 CDN 链接必须带显式版本号，@latest 不支持，漏写或写错会直接 404。当前稳定推荐写法是：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/open-props@12.2.0/index.min.css">
国内网络偶尔不稳定时可备用 unpkg：
<link rel="stylesheet" href="https://unpkg.com/open-props@12.2.0/index.min.css">
- 所有变量（
--color-blue-600、--size-4、--radius-md等）引入后立即可用，无需额外声明 - 不建议混用多个版本，比如
v12.1.0和v12.2.0中的--breakpoint-md数值可能不同 -
npm install open-props后无法直接@import "open-props"，因为包里没有导出浏览器可识别的 CSS 入口；package.json的"style"字段为空
为什么不能直接用 npm + @import
执行 npm install open-props 后拿到的是源码和 TypeScript 类型定义，不是开箱即用的 CSS 文件。构建工具（Vite/Webpack/PostCSS）默认找不到 open-props/index.css 路径，@import "open-props" 会静默失败或报错 Cannot resolve module。
立即学习“前端免费学习笔记（深入）”；
可行但繁琐的替代方案只有两个：
- 手动复制
node_modules/open-props/css/index.min.css到项目src/assets/下，再@import "./assets/index.min.css" - 用第三方插件如
vite-plugin-open-props自动注入 —— 但该插件非官方维护，版本兼容性需自行验证
结论：除非你有离线部署或深度定制源码的需求，否则跳过 npm，坚持用 CDN 更省心、调试直观、更新及时。
变量怎么用？哪些容易踩坑
所有变量都是纯数值，比如 --space-4 是 1rem，--breakpoint-md 是 768px，它们不带逻辑，只提供可复用的“原始值”。
- 响应式仍需手写媒体查询：
@media (min-width: var(--breakpoint-md)) { ... }，变量本身不会自动触发断点 - 明暗主题切换要自己控制：
:root里定义基础值，再用@media (prefers-color-scheme: dark)或[data-theme="dark"]覆盖，Open Props 不提供默认切换逻辑 - 别覆盖已有命名体系：如果你已有
--color-brand，不要直接赋值给--color-primary，应统一使用 Open Props 的语义命名（如--color-blue-6），保持跨项目一致性 - 渐变、噪声等高级功能需单独引入：
gradients.min.css或noise.min.css，主包不包含这些
真正容易被忽略的是：变量只是“值”，不是“行为”。你引入的是一套设计令牌（design tokens），不是一套样式框架 —— 它帮你管好数字，但布局、组件结构、交互状态，还得你自己用 CSS 写清楚。
