Sass @import指令

导入指令,导入SASS或者SCSS文件。它直接需要导入文件名。所有这一切都是导入SASS文件将在一个CSS文件中结合。但是也有一些编译为CSS,当我们使用@import规则,有几件事情需要注意:
  • 文件扩展名为 .css

  • 文件名以 http:// 开始

  • 文件名是 url()

  • @import 构成任何媒体查询

例如,创建一个SASS文件,用下面的代码:
@import "style.css";
@import "http://www.e-learn.cn/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 "http://www.e-learn.cn/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.e-learn.cn</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文件,得到输出如下显示