@import必须位于css文件最前面，仅允许@charset在其前；支持媒体查询但不并行加载，现代项目中推荐用替代。
@import 必须写在 CSS 文件最前面
如果 @import 前面有任何其他规则（包括注释、空行、@charset 以外的声明），浏览器会直接忽略它。常见翻车现场：在 @import 上方加了一行 /* 公共样式 */ 或不小心留了空白行。
正确写法只有一种顺序：@charset（可选，且必须是第一行）→ @import → 其他样式规则。
-
@import后必须跟 URL 字符串，支持单引号、双引号或不带引号（但路径含空格或特殊字符时必须加引号） - 相对路径以引入它的 CSS 文件为基准，不是 HTML 文件位置
- 不能用
@import加载跨域资源（除非目标服务器返回Access-Control-Allow-Origin）
@import 支持媒体查询条件
可以给 @import 加媒体类型或查询，实现按需加载。比如只在打印时引入打印样式：
@import url("print.css") print;
也可以写更复杂的条件：
@import url("mobile.css") (max-width: 768px);
- 多个条件用
and连接，not和only也支持 - 注意括号前后不能有空格，否则语法错误
- 浏览器仍会下载该文件，只是不立即应用样式——这点和
<link media>不同
@import 在现代项目中通常不如 高效
@import 是串行加载：A.css 里 @import B.css，B.css 必须等 A.css 下载解析完才开始请求，无法并行。
- HTML 中用
<link rel="stylesheet" href="B.css">可与 A.css 并行下载 - 构建工具（如 Webpack、Vite）通常把
@import当作静态依赖处理，但不会优化网络请求顺序 - 部分旧版 IE 对嵌套
@import层级有限制（如 IE6 最多 4 层）
替代方案：预处理器里的 import 不等于 CSS @import
Sass/Less 的 @import 是编译期行为，最终输出的是合并后的一份 CSS，不产生额外 HTTP 请求。这和原生 CSS 的 @import 完全不同，别混淆。
- Sass 中
@import "vars"→ 编译时插入 _vars.scss 内容 - 原生 CSS 中
@import "vars.css"→ 运行时发起新 HTTP 请求 - 如果用了预处理器，就别在生成的 CSS 里再手动写
@import，容易重复加载
实际项目里，@import 最适合做轻量级条件引入（比如主题切换、降级样式），而不是组织主样式结构。真要拆分 CSS，优先用 HTML 的 <link> 或构建时合并。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
