Sass：Import

描述

导入指令，导入SASS或SCSS文件。它直接将文件名导入。在SASS中导入的所有文件都将合并到一个CSS文件中。当我们使用@import规则时，编译成CSS的东西很少。

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

例如，使用以下代码创建一个SASS文件：

@import "style.css";
@import "http://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 "http://tutorialspoint.com/bar";
@import url(style);
@import "style" screen;

以下是使用@import规则导入文件的方法-

部分

部分是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; }

作者：terry，如若转载，请注明出处：https://www.web176.com/sass/1710.html