Sass - 匯入指令

描述

匯入指令匯入 SASS 或 SCSS 檔案。它直接使用檔名進行匯入。所有在 SASS 中匯入的檔案都將組合成單個 CSS 檔案。使用@import規則時，有一些內容會被編譯成 CSS：

副檔名.css
檔名以http://開頭
檔名是url()
@import包含任何媒體查詢。

例如，建立一個包含以下程式碼的 SASS 檔案：

@import "style.css";
@import "https://tutorialspoint.tw/bar";
@import url(style);
@import "style" screen;

可以使用以下命令告訴 Sass 監視檔案並在 SASS 檔案更改時更新 CSS：

sass --watch C:\ruby\lib\sass\style.scss:style.css

上述程式碼將編譯成如下所示的 CSS 檔案：

@import url(style.css);
@import "https://tutorialspoint.tw/bar";
@import url(style);
@import "style" screen;

以下是使用@import規則匯入檔案的方法：

部分檔案（Partials）

部分檔案是 SASS 或 SCSS 檔案，它們在名稱開頭使用下劃線編寫（_partials.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.htm

<html>
   <head>
      <title>Import example of sass</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body class = "container">
      <h1>Example using 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:\ruby\lib\sass\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_rules_and_directives.htm

列印頁面