SASS教學 » Sass @import指令

Sass @import指令

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

  • 檔案擴充套件名為 .css

  • 檔案名以 http:// 開始

  • 檔案名是 url()

  • @import 構成任何媒體查詢

例如，建立一個SASS檔案，用下面的程式碼： 
@import "style.css";
@import "https://www.tw511.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 "https://www.tw511.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.tw511.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檔案，得到輸出如下顯示