@import 在原生 css 中仅能同步引入规则，不支持变量或混合宏；真正实现复用需依赖预处理器（如 sass 的 @use）或 css 自定义属性配合构建工具统一管理。
@import 在现代 CSS 中的实际可用性
它不能用来按需加载变量或混合宏，@import 是同步阻塞的，且在 CSS 里不支持条件、作用域或复用逻辑——你写 @import，浏览器就立刻去下载并解析整个文件，不管里面有没有用到的 $color-primary 或 @mixin button-base。
真正能做变量和混合宏的，是预处理器（如 Sass、Less），不是原生 CSS。如果你正用纯 CSS 写 @import url('variables.css')，那变量根本不会生效，CSS 里压根没有变量语法。
-
@import只能引入另一份 CSS 规则，不能引入“定义”，更不能跨文件复用var(--color)以外的东西 - 即使你把
:root { --color-primary: #007bff; }放进被 import 的文件，它也能生效，但这靠的是级联和自定义属性机制，不是@import本身的能力 - 多个
@import会串行请求，在 HTTP/1.x 下明显拖慢首屏，现代项目基本被 Webpack/Vite 等构建工具自动转成单文件，实际不会发出独立请求
Sass 中 @import 的替代方案：@use vs @forward
Sass 从 4.0 开始已弃用 @import，新项目必须用 @use 或 @forward ——它们提供命名空间、私有成员控制和明确依赖关系，这才是“安全引入变量和混合宏”的正确姿势。
比如你有一个 _mixins.scss 和一个 _vars.scss：
立即学习“前端免费学习笔记（深入）”；
@use 'vars' as v;
@use 'mixins' as m;
.button {
@include m.button-base;
color: v.$color-primary;
}
-
@use默认启用命名空间，避免全局污染；想不加前缀就得显式as *，但不推荐 -
@forward用于“透传”子模块，比如@forward 'vars' with ($color-primary: #0056b3);可重写默认值 - 旧
@import会把所有变量/混合宏直接注入当前作用域，容易冲突，尤其团队协作时
原生 CSS 自定义属性（CSS Variables）怎么真正复用
如果坚持不用预处理器，那就得靠 :root + var() + 构建时合并。关键不是 @import，而是如何组织和注入这些定义。
常见错误是：在每个组件 CSS 里重复写 :root { --color-primary: ... }，结果样式被覆盖、无法统一维护。
- 把所有
:root定义集中在一个base.css文件中，用构建工具确保它在其他 CSS 之前加载 - 在 JS 中动态切换主题？改
document.documentElement.style.setProperty('--color-primary', '...')，而不是重载 CSS 文件 - 注意作用域：子元素可以继承
:root定义，但若在局部选择器里重新声明--color-primary，会影响其后代，不是全局覆盖
为什么你看到的“@import 引入变量”示例大概率是错的
很多博客写的 @import 'colors.css'; 配合 var(--primary)，看似可行，其实混淆了两个层面：文件加载方式和变量运行机制。
那个 colors.css 里写的从来不是“变量声明语句”，而是带 :root 的规则块——它生效靠的是 CSS 级联顺序，不是 @import 解析出变量。
- 删掉
@import，把内容内联进主 CSS，效果一模一样 - 把
@import放在文件末尾？:root定义会被忽略（级联顺序靠后，但:root是伪类，只认第一个匹配的） - 想热更新变量？原生 CSS 没这能力，得靠 JS 注入或构建时替换
真正要优化开发体验，重点不在怎么 @import，而在选对工具链：Sass + @use 提供静态检查和 IDE 支持，CSS-in-JS 提供运行时灵活性，纯 CSS 则必须接受它的静态本质——变量只是属性，不是编程语言里的符号。
