背景：

最近在参考网上的开源项目做CSS的练习，看到其中用到了 @import ，在这里进行记录（文中部分参考需要科学上网）。

定义与用法：

• @import可以在一个CSS文件中用来导入另一个CSS文件的样式
• @import必须在文件的第一行（但是在@charset语句之后）
• @import支持媒体查询（media query），即只会在符合定义的屏幕上导入CSS规则

demo

语法（syntax）

@import url|string list-of-mediaqueries;

@import "navigation.css"; /* Using a string */

or

@import url("navigation.css"); /* Using a url */

// 只在print的媒介上导入css规则
@import "printstyle.css" print;

// 只在screen媒介并且屏幕最大像素不超过768px上导入css规则
@import "mobstyle.css" screen and (max-width: 768px);

区别

<link rel='stylesheet' href='a.css'>

<style>
@import url('a.css');
</style>

@import可能会造成浏览器性能问题，建议选中 link

参考

CSS @import Rule
don’t use @import