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
sass_rules_and_directives.htm
广告