CSS import 规则

CSS import是CSS样式表中一个非常重要的特性，允许开发者将一个CSS文件导入到另一个文件中，以便在同一个页面中被使用。下面是CSS import的规则。

基本概念

在CSS样式表中使用@import指令可以引入其他CSS文件。引入的CSS文件会被合并到当前文件中，浏览器也会优先解析并应用导入的CSS文件。

引入CSS文件

可以使用@import指令在当前的CSS文件中导入其他的CSS文件。@import指令应该写在样式表的最开始的位置，以确保导入的样式表被浏览器优先执行。

下面是一个简单的例子：

@import url("style.css");

多个CSS文件的导入

可以在同一个CSS文件中导入多个CSS文件。实际上，我们在使用CSS框架时经常会看到这种情况。

下面是一个例子，演示了如何导入两个CSS文件。

@import url('style1.css');
@import url('style2.css');

需要注意的一点是，当有多个样式表被导入时，浏览器解析这些样式表的顺序是按照指定的顺序从上到下进行的。

导入条件

可以在@import指令后面加上一个逗号分隔的媒体查询条件，以控制CSS文件在何种情况下被导入和应用。

下面是一个例子：

@import url('print-style.css') print;

在这个例子中，print-style.css只会在打印时被应用，而不会在屏幕上显示。

注意：媒体查询是CSS3中新增加的概念，要在更老的浏览器中支持媒体查询的话，可以使用respond.js等第三方库来模拟媒体查询。

预处理器的使用

在使用CSS预处理器时，其实也可以使用@import指令来导入其他的文件。不过和原生CSS有一些略微的不同。

在预处理器中，可以使用@import关键字去引入其他的文件：

@import 'style';

需要注意的是，预处理器使用的文件路径规则，往往不同于CSS。比如说，使用Sass的时候，可以使用@import指令，而使用Less的时候，可以使用import关键字去导入其他的文件。

总结

通过本文的介绍，我们可以发现CSS import规则非常灵活，可以在不同的情况下使用不同的方法，去实现我们期望的效果。我们可以使用@import指令来导入其他的CSS样式表文件，以方便的管理我们的代码。同时，在需要使用媒体查询的情况下，也可以轻松的使用@import指令来引入不同的样式表文件，以达到更好的展示效果。