Sass - 导入指令

描述

导入指令导入 SASS 或 SCSS 文件。它直接使用文件名进行导入。所有在 SASS 中导入的文件都将组合成单个 CSS 文件。使用@import规则时，有一些内容会被编译成 CSS：

文件扩展名.css
文件名以http://开头
文件名是url()
@import包含任何媒体查询。

例如，创建一个包含以下代码的 SASS 文件：

@import "style.css";
@import "https://tutorialspoint.com/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.com/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

打印页面