
- Sass 教程
- Sass - 首页
- Sass - 概述
- Sass - 安装
- Sass - 语法
- 使用 Sass
- Sass - CSS 扩展
- Sass - 注释
- Sass - 脚本
- Sass - @规则和指令
- 控制指令和表达式
- Sass - Mixin 指令
- Sass - 函数指令
- Sass - 输出样式
- 扩展 Sass
- Sass 有用资源
- Sass - 面试问题
- Sass - 快速指南
- Sass - 有用资源
- Sass - 讨论
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
广告