open props是一套开源、可直接引入的css自定义属性集合，本质是标准化design tokens（如--color-gray-400），不依赖构建工具或npm；而普通css变量需手动定义，缺乏跨项目一致性与开箱即用的设计系统支持。
Open Props 是什么，和普通 CSS 变量有什么区别
Open Props 不是框架，也不是运行时库，它是一套开源、可直接复制粘贴的 :root CSS 变量定义集合，目标是提供跨项目一致的 design tokens（比如 --color-gray-400、--size-4）。它不依赖构建工具，也不需要 npm install —— 本质就是一段纯 CSS，你引入它，就等于把几百个标准化变量注入到全局作用域。
直接通过 <link> 引入官方 CDN 版本（最简方式）
官方维护了托管在 jsDelivr 的 minified CSS 文件，适合快速验证或轻量项目：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/open-props@12.2.0/index.min.css">
注意三点：
- 版本号（如
@12.2.0）必须显式指定，Open Props 不支持@latest别名，不写会 404 - 引入后变量立即可用，比如
color: var(--color-blue-600);就能生效 - CDN 版本默认启用全部 token 分组（colors、sizes、shadows、radii 等），无法按需剔除
用 @import 在已有 CSS 文件中加载（适合已有构建流程）
如果你的项目已有 main.css 或使用 PostCSS，推荐这种方式，便于统一管理与后续定制：
@import "https://cdn.jsdelivr.net/npm/open-props@12.2.0/index.min.css";
但要注意：
-
@import必须写在 CSS 文件顶部，且不能在@layer或嵌套规则内 - Vite / Webpack 默认不解析外部
@import，此时需改用url()形式或转为本地副本 - 若想只加载部分 token（例如只要颜色和间距），得改用本地
index.color.css等子模块路径，但子模块不保证所有版本都存在，建议查 GitHub css 目录 确认
为什么不能用 npm install open-props 后直接 @import？
因为 Open Props 的 npm 包里没有导出可被 CSS @import 解析的路径。它的 package.json 的 "style" 字段为空，且主文件是 TypeScript 类型声明。你执行 npm install open-props 后，实际得到的是源码和类型，不是开箱即用的 CSS。
正确做法是：
- 手动复制
node_modules/open-props/css/index.min.css到你的src/assets/下再引用 - 或用构建插件（如 Vite 的
vite-plugin-open-props）自动注入，但这类插件非官方维护，稳定性需自行验证 - 更稳妥的是跳过 npm，坚持用 CDN 链接 —— 它更新及时、无构建耦合、调试时查看源码也直观
容易忽略的一点：Open Props 的变量名带连字符（如 --shadow-sm），但不支持动态计算（比如 calc(var(--size-2) * 2) 在旧版 Safari 会失败），如果项目需兼容 iOS 15.4 以下，得提前加 fallback。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
