自学教程与普通CSS 导入不同，普通CSS导入要求浏览器在渲染页面时发出多个HTTP请求，而Sass导入则完全在编译过程中处理。导入文件中的所有mixins，function和variable都可用。
Sass 导入与 CSS 导入具有相同的语法，只是它们允许多个导入用逗号分隔，而不是要求每个导入都有自己的@import。此外，在缩进语法中，导入的 URL 不需要有引号。
Sass团队不鼓励继续使用该@import规则。Sass将在未来几年逐步淘汰它，并最终将其从语言中完全删除。最好选择@use规则 。
SCSS
// foundation/_code.scss
code {
padding: .25em;
line-height: 0;
}
// foundation/_lists.scss
ul, ol {
text-align: left;
& & {
padding: {
bottom: 0;
left: 0;
}
}
}
// style.scss
@import 'foundation/code', 'foundation/lists';编译为 CSS 结果：
CSS
code {
padding: .25em;
line-height: 0;
}
ul, ol {
text-align: left;
}
ul ul, ol ol {
padding-bottom: 0;
padding-left: 0;
}Partials
按照惯例，仅应导入而不是自己编译的Sass文件以开头_（如_code.scss）。这些称为partials，它们告诉Sass工具不要尝试自行编译那些文件。可以去掉的_导入部分时。
索引文件
如果您在文件夹中写入_index.scss或_index.sass，则在导入文件夹本身时，该文件将被加载到其位置。
实例
// foundation/_code.scss
code {
padding: .25em;
line-height: 0;
}
// foundation/_lists.scss
ul, ol {
text-align: left;
& & {
padding: {
bottom: 0;
left: 0;
}
}
}
// foundation/_index.scss
@import 'code', 'lists';
// style.scss
@import 'foundation';编译为 CSS 结果：
CSS
code {
padding: .25em;
line-height: 0;
}
ul, ol {
text-align: left;
}
ul ul, ol ol {
padding-bottom: 0;
padding-left: 0;
}嵌套
导入通常在样式表的顶层编写，但并非必须如此。它们也可以嵌套在样式规则或纯 CSS at 规则中。
SCSS
// _theme.scss
pre, code {
font-family: 'Source Code Pro', Helvetica, Arial;
border-radius: 4px;
}
// style.scss
.theme-sample {
@import "theme";
}编译为 CSS 结果：
CSS
.theme-sample pre, .theme-sample code {
font-family: 'Source Code Pro', Helvetica, Arial;
border-radius: 4px;
}
导入 CSS
除了导入 .sass 和 .scss 文件外，Sass 还可以导入普通的旧.css文件。唯一的规则是导入不得显式包含.css扩展，因为这用于指示纯 CSS @import。
SCSS
// code.css
code {
padding: .25em;
line-height: 0;
}
// style.scss
@import 'code';编译为 CSS 结果：
实例
code {
padding: .25em;
line-height: 0;
}导入纯 CSS
Sass会将具有以下特征的任何s 编译为纯CSS 导入：
- 导入URL以结尾的位置
.css。 - 导入URL开头
http://或的位置https://。 - 导入将URL写入为的位置
url()。 - 具有媒体查询的导入。
SCSS
@import "theme.css";
@import "http://fonts.googleapis.com/css?family=Droid+Sans";
@import url(theme);
@import "landscape" screen and (orientation: landscape);编译为 CSS 结果：
实例
@import url(theme.css);
@import "http://fonts.googleapis.com/css?family=Droid+Sans";
@import url(theme);
@import "landscape" screen and (orientation: landscape);插值
Sass导入不能使用，纯CSS导入可以使用：
SCSS
@mixin google-font($family) {
@import url("http://fonts.googleapis.com/css?family=#{$family}");
}
@include google-font("Droid Sans");编译为 CSS 结果：
CSS
@import url("http://fonts.googleapis.com/css?family=Droid Sans");导入模块
SCSS
// _library.scss
$color: blue !default;
a {
color: $color;
}
// _library.import.scss
@forward 'library' as lib-*;
// style.sass
$lib-color: green;
@import "library";
编译为 CSS 结果：
CSS
a {
color: green;
}
分享笔记