Open Props 提供开箱即用的 CSS 变量系统，支持 CDN 直引（如 jsDelivr 或 unpkg）、CSS @import 两种方式，需显式指定版本；不推荐 npm 安装，因其无直接可用 CSS 入口；变量为纯数值，响应式需手动结合媒体查询使用。
直接引入 Open Props 就能拿到一套开箱即用、高质感的 CSS 设计系统变量，不需要构建工具、不依赖 npm、不写一行 JS —— 本质就是把标准化的 :root 变量批量注入全局作用域。
用 <link> 引入 CDN 版本（最简可行路径）
这是最快验证和上线的方式，适合原型、轻量项目或不想动构建流程的场景：
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/open-props@12.2.0/index.min.css">是当前稳定推荐写法；版本号必须显式指定，@latest不支持，漏写会 404 - 引入后所有变量立即生效，比如
color: var(--color-blue-600)、padding: var(--size-3)都可直接用 - CDN 版本默认加载全部 token 分组（colors / sizes / shadows / radii / transitions / breakpoints 等），无法按需剔除，但换来的是零配置一致性
- 注意：部分国内网络环境对 jsDelivr 偶有不稳定，可备用
https://unpkg.com/open-props@12.2.0/index.min.css（同样需带版本）
在已有 CSS 文件中用 @import（适合工程化项目）
如果你的项目已有 main.css 或使用 PostCSS/Vite 构建，@import 更利于统一管理与后续定制：
- 必须写在 CSS 文件最顶部，且不能包裹在
@layer、@media或嵌套规则内，否则被忽略 - 正确写法：
@import "https://cdn.jsdelivr.net/npm/open-props@12.2.0/index.min.css"; - Vite 默认不解析外部
@import，此时要么改用@import url(...)形式，要么把文件复制进src/assets/后本地引用 - 想只加载颜色+间距？可尝试子模块路径如
@import "https://cdn.jsdelivr.net/npm/open-props@12.2.0/css/index.color.css"，但子模块不是每个版本都发布，得去 GitHub 的css/目录手动确认存在
别踩 npm install 的坑：它不提供可直接 @import 的 CSS 路径
执行 npm install open-props 后，你拿到的是源码和 TypeScript 类型声明，package.json 中 "style" 字段为空，没有导出浏览器可识别的 CSS 入口：
立即学习“前端免费学习笔记（深入）”；
- 直接写
@import "open-props"或@import "open-props/index.css"会失败 —— 构建工具找不到对应文件 - 可行替代：手动拷贝
node_modules/open-props/css/index.min.css到项目静态资源目录再引用 - 第三方插件（如
vite-plugin-open-props）非官方维护，版本兼容性和长期可用性需自行验证 - 结论：除非你明确需要离线构建或深度定制源码，否则跳过 npm，坚持用 CDN 更省心、更新及时、调试直观
真正容易被忽略的是变量命名空间和响应式断点的耦合方式 —— Open Props 的 --breakpoint-md 这类变量本身不触发媒体查询，它只是个数值，你仍需手写 @media (min-width: var(--breakpoint-md))。别指望引入就自动适配，它的“响应式”是提供可复用的值，不是封装逻辑。
