導入指令，導入SASS或者SCSS文件。它直接需要導入文件名。所有這一切都是導入SASS文件將在一個CSS文件中結合。但是也有一些編譯爲CSS，當我們使用@import規則，有幾件事情需要注意：

• 文件擴展名爲 .css

• 文件名以 http:// 開始

• 文件名是 url()

• @import 構成任何媒體查詢

例如，創建一個SASS文件，用下面的代碼：

@import "style.css";
@import "http://www.yiibai.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.yiibai.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

@Import指令示例

Import the files in SASS

• Red
• Green

接下來，創建文件_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文件，得到輸出如下顯示