@import

Sass 具有导入Sass和CSS样式表的能力，从而扩展了CSS的@import规则，可以访问mixins，functions和variable并将多个样式表css组合在一起。与普通CSS导入不同，普通CSS导入要求浏览器在渲染页面时发出多个HTTP请求，而Sass导入则完全在编译过程中处理。

Sass导入与CSS导入具有相同的语法，不同的是它们允许多个导入用逗号分隔，而不是要求每个导入都有自己的@import。同样，在缩进语法中，导入的URL不需要带引号。

Head️抬头！

Sass团队不鼓励继续使用该@import规则。Sass将在未来几年逐步淘汰它，并最终将其从语言中完全删除。最好选择@use规则。

怎么了 `@import`？

该@import规则存在许多严重问题：

@import使所有变量，mixin和函数都可以全局访问。这使人员（或工具）很难说出定义了什么。
因为所有内容都是全局的，所以库必须为所有成员添加前缀，以避免命名冲突。
@extend规则也是全局的，因此很难预测将扩展哪些样式规则。
每个样式表都会执行一次，每次编辑时都会发出CSS，这会增加编译时间并产生肿的输出。@import
无法定义下游样式表无法访问的私有成员或占位符选择器。

新的模块系统和@use规则解决了所有这些问题。

我该如何迁移？

我们已经编写了一个迁移工具，该工具可以@import在@use短时间内自动将大多数基于代码的代码转换为基于代码的代码。只需将其指向您的入口点即可运行！

SCSS
Sass
css
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';
Sass语法// foundation/_code.sass
code
  padding: .25em
  line-height: 0

// foundation/_lists.sass
ul, ol
  text-align: left

  & &
    padding:
      bottom: 0
      left: 0



// style.sass
@import foundation/code, foundation/lists
CSS  输出code {
  padding: .25em;
  line-height: 0;
}

ul, ol {
  text-align: left;
}
ul ul, ol ol {
  padding-bottom: 0;
  padding-left: 0;
}

当Sass导入文件时，将对该文件进行评估，就好像其内容直接出现在的位置@import。导入文件中的所有mixins，function和variable都可用，并且所有CSS 都包含在@import编写的确切位置。此外，在导入的样式表中可以使用之前@import（包括其他@import）定义的任何混合，函数或变量。

Head️抬头！

如果同一样式表被多次导入，则每次都会对其进行再次评估。如果仅定义函数和mixin，通常就没什么大不了的，但是如果其中包含样式规则，则它们将多次编译成CSS。

查找文件永久链接查找文件

为您导入的每个样式表写出绝对URL并不是一件有趣的事，因此Sass的算法可以找到要导入的文件，从而使其变得更加容易。对于初学者来说，您不必显式写出要导入的文件的扩展名。@import "variables"会自动加载variables.scss，variables.sass或 variables.css。

Head️抬头！

为了确保样式表可以在每个操作系统上运行，Sass通过URL而不是通过path导入文件。这意味着即使在Windows上，也需要使用正斜杠而不是反斜杠。

加载路径永久链接加载路径

所有Sass实现都允许用户提供加载路径：解析导入时Sass将在文件系统上查找的路径。例如，如果您node_modules/susy/sass作为加载路径传递，则可以使用@import "susy" load node_modules/susy/sass/susy.scss。

但是，始终始终会先相对于当前文件解决导入问题。仅当不存在与导入匹配的相对文件时，才使用加载路径。这样可以确保添加新库时不会意外弄乱相对导入。

???? 有趣的事实：

与其他一些语言不同，Sass不需要您使用./相对导入。相对导入始终可用。

Partials永久链接 Partials

按照惯例，仅应导入而不是自己编译的Sass文件以开头_（如_code.scss）。这些称为partials，它们告诉Sass工具不要尝试自行编译那些文件。可以去掉的_导入部分时。

索引文件永久链接索引文件

Dart·Sass（Dart Sass）: ✓
LibSass: 从 3.6.0开始
rubySass: 从 3.6.0开始

如果您在文件夹中写入_index.scss或_index.sass，则在导入文件夹本身时，该文件将被加载到其位置。

SCSS
Sass
css
SCSS  语法// 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';
Sass语法// foundation/_code.sass
code
  padding: .25em
  line-height: 0

// foundation/_lists.sass
ul, ol
  text-align: left

  & &
    padding:
      bottom: 0
      left: 0



// foundation/_index.sass
@import code, lists
// style.sass
@import foundation
CSS  输出code {
  padding: .25em;
  line-height: 0;
}

ul, ol {
  text-align: left;
}
ul ul, ol ol {
  padding-bottom: 0;
  padding-left: 0;
}

海关进口商永久链接海关进口商

所有Sass实现都提供了一种定义自定义导入器的方法，该方法可以控制如何@import定位样式表：

npm上的 Node Sass和Dart Sass提供了一个importer选项，作为其JS API的一部分。
pub上的Dart Sass提供了一个抽象Importer类，可由自定义导入程序扩展。
Ruby Sass提供了一个抽象Importers::Base类，可以由自定义导入程序扩展。

嵌套固定链接嵌套

导入通常是在样式表的顶层编写的，但不一定必须如此。它们可以嵌套在样式规则或普通CSS规则中。导入的CSS嵌套在该上下文中，这使得嵌套的导入对于将CSS块限定到特定元素或媒体查询很有用。请注意，尽管如此，在嵌套导入中定义的顶级mixins，函数和变量仍然是全局定义的。

SCSS
Sass
css
SCSS  语法// _theme.scss
pre, code {
  font-family: 'Source Code Pro', Helvetica, Arial;
  border-radius: 4px;
}
// style.scss
.theme-sample {
  @import "theme";
}
Sass语法// _theme.sass
pre, code
  font-family: 'Source Code Pro', Helvetica, Arial
  border-radius: 4px

// style.sas
.theme-sample
  @import theme

CSS  输出.theme-sample pre, .theme-sample code {
  font-family: 'Source Code Pro', Helvetica, Arial;
  border-radius: 4px;
}

???? 有趣的事实：

嵌套的导入对于确定第三方样式表的范围非常有用，但是如果您是要导入的样式表的作者，通常最好将样式编写为mixin并将该mixin包含在嵌套上下文中。可以以更加灵活的方式使用mixin，并且在查看导入的样式表时可以更清楚地了解其用途。

Head️抬头！

嵌套导入中的CSS的评估就像mixin一样，这意味着任何父选择器都将引用嵌套样式表的选择器。

SCSS
Sass
css
SCSS  语法// _theme.scss
ul li {
  $padding: 16px;
  padding-left: $padding;
  [dir=rtl] & {
    padding: {
      left: 0;
      right: $padding;
    }
  }
}
// style.scss
.theme-sample {
  @import "theme";
}
Sass语法// _theme.sass
ul li
  $padding: 16px
  padding-left: $padding
  [dir=rtl] &
    padding:
      left: 0
      right: $padding



// style.sass
.theme-sample
  @import theme

CSS  输出.theme-sample ul li {
  padding-left: 16px;
}
[dir=rtl] .theme-sample ul li {
  padding-left: 0;
  padding-right: 16px;
}

导入CSS永久链接导入 CSS

Dart·Sass（Dart Sass）: 从 1.11.0开始
LibSass: 部分的
rubySass: ✗

LibSass支持导入扩展名为的文件.css，但与规范相反，它们被视为SCSS文件，而不是被解析为CSS。此行为已被弃用，并且正在进行更新以支持以下行为。

除了导入.sass和.scss文件外，Sass可以导入普通的旧.css文件。唯一的规则是，导入不得明确包含.css扩展名，因为该扩展名用于表示普通CSS @import。

SCSS
Sass
css
SCSS  语法// code.css
code {
  padding: .25em;
  line-height: 0;
}
// style.scss
@import 'code';
Sass语法// code.css
code {
  padding: .25em;
  line-height: 0;
}
// style.sass
@import code
CSS  输出code {
  padding: .25em;
  line-height: 0;
}

Sass导入的CSS文件不允许任何特殊的Sass功能。为了确保作者不会在CSS中意外编写Sass ，所有不是有效CSS的 Sass功能也会产生错误。否则，CSS将按原样呈现。它甚至可以扩展！

纯CSS @imports永久链接纯 CSS `@import`小号

Dart·Sass（Dart Sass）: ✓
LibSass: 部分的
rubySass: ✓

默认情况下，LibSass 正确处理普通CSS导入。但是，任何自定义导入器都会错误地将其应用于纯CSS @import规则，从而使这些规则可以加载Sass文件。

由于CSS@import也已定义，因此Sass需要一种编译普通CSS的方法，而无需尝试在编译时导入文件。为此，并确保SCSS尽可能多地是CSS的超集，Sass会将具有以下特征的任何s 编译为纯CSS 导入： @import@import

导入URL以结尾的位置 .css。
导入URL开头http://或的位置 https://。
导入将URL写入为的位置 url()。
具有媒体查询的导入。

SCSS
Sass
css
SCSS  语法@import "theme.css";
@import "http://fonts.googleapis.com/css?family=Droid+Sans";
@import url(theme);
@import "landscape" screen and (orientation: landscape);
Sass语法@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导入不能使用插值（以确保始终可以知道mixins，function和variable来自何处），但是纯CSS导入可以。这样就可以动态生成导入，例如基于混合参数。

SCSS
Sass
css
SCSS  语法@mixin google-font($family) {
  @import url("http://fonts.googleapis.com/css?family=#{$family}");
}

@include google-font("Droid Sans");
Sass语法@mixin google-font($family)
  @import url("http://fonts.googleapis.com/css?family=#{$family}")


@include google-font("Droid Sans")
CSS  输出@import url("http://fonts.googleapis.com/css?family=Droid Sans");

导入和模块permalink导入和模块

Dart·Sass（Dart Sass）: 从 1.23.0开始
LibSass: ✗
rubySass: ✗

目前仅Dart Sass支持@use。其他实现的用户必须改用@import规则。

无论您要导入包含规则的文件还是要加载包含导入的文件作为模块，Sass的模块系统都与完美集成。我们希望使从过渡到尽可能顺利。@import@use@import@use

导入模块系统文件永久链接导入模块系统文件

导入包含@use规则的文件时，导入文件可以访问直接在该文件中定义的所有成员（甚至私有成员），但不能访问该文件已加载的模块中的任何成员。但是，如果该文件包含@forwardrules，则导入文件将有权访问转发的成员。这意味着您可以导入编写用于模块系统的库。

Head️抬头！

@use导入包含规则的文件时，这些规则可传递地加载的所有CSS都将包含在结果样式表中，即使该文件已经被其他导入包含了。如果您不小心，可能会导致CSS 输出过大！

仅导入文件永久链接仅导入文件

有意义的API@use可能对无效@import。例如，@use默认情况下，向所有成员添加一个名称空间，这样您就可以安全地使用短名称，但@import不必这样做，因此您可能需要更长的时间。如果您是图书馆作者，则可能会担心，如果您更新图书馆以使用新的模块系统，那么现有的@import基于用户的用户将中断。

为了简化此过程，Sass还支持仅导入文件。如果您命名文件<name>.import.scss，则只会为导入而加载，不会为@uses 加载。这样，您可以保留@import用户的兼容性，同时仍为新模块系统的用户提供一个不错的API。

SCSS
Sass
SCSS  语法// _reset.scss

// Module system users write `@include reset.list()`.
@mixin list() {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
}
// _reset.import.scss

// Legacy import users can keep writing `@include reset-list()`.
@forward "reset" as reset-*;
Sass语法// _reset.sass

// Module system users write `@include reset.list()`.
@mixin list()
  ul
    margin: 0
    padding: 0
    list-style: none


// _reset.import.sass

// Legacy import users can keep writing `@include reset-list()`.
@forward "reset" as reset-*

通过导入配置模块永久链接通过导入配置模块

Dart·Sass（Dart Sass）: 从 1.24.0开始
LibSass: ✗
rubySass: ✗

您可以在首次加载模块之前定义全局变量，以配置通过加载的模块。@import@import

SCSS
Sass
css
SCSS  语法// _library.scss
$color: blue !default;

a {
  color: $color;
}
// _library.import.scss
@forward 'library' as lib-*;
// style.sass
$lib-color: green;
@import "library";
Sass语法$color: blue !default

a
  color: $color


// _library.import.sass
@forward 'library' as lib-*
// style.sass
$lib-color: green
@import "library"
CSS  输出a {
  color: green;
}

Head️抬头！

模块仅加载一次，因此，如果您@import是第一次（甚至是间接地）更改了模块后的配置，则@import再次使用该模块时，更改将被忽略。

加载包含导入的模块永久链接加载包含导入的模块

当您使用@use（或@forward）加载使用的模块时@import，该模块将包含您加载的样式表定义的所有公共成员以及样式表可传递地导入的所有内容。换句话说，所有导入的内容都被视为是在一个大的样式表中编写的。

这样，@use即使您依赖的所有库都已转换为新的模块系统，也可以轻松地在样式表中开始使用转换。但是请注意，如果他们进行转换，它们的API可能会发生变化！

@import

Head️抬头！

怎么了 @import？

我该如何迁移？

SCSS 语法

Sass语法

CSS 输出

Head️抬头！

查找文件永久链接查找文件

Head️抬头！

加载路径永久链接加载路径

???? 有趣的事实：

Partials永久链接 Partials

索引文件永久链接索引文件

SCSS 语法

Sass语法

CSS 输出

海关进口商永久链接海关进口商

嵌套固定链接嵌套

SCSS 语法

Sass语法

CSS 输出

???? 有趣的事实：

Head️抬头！

SCSS 语法

Sass语法

CSS 输出

导入CSS永久链接导入 CSS

SCSS 语法

Sass语法

CSS 输出

纯CSS @imports永久链接纯 CSS @import小号

SCSS 语法

Sass语法

CSS 输出

插值固定链接插值

SCSS 语法

Sass语法

CSS 输出

导入和模块permalink导入和模块

导入模块系统文件永久链接导入模块系统文件

Head️抬头！

仅导入文件永久链接仅导入文件

SCSS 语法

Sass语法

通过导入配置模块永久链接通过导入配置模块

SCSS 语法

Sass语法

CSS 输出

Head️抬头！

加载包含导入的模块永久链接加载包含导入的模块

怎么了 `@import`？

纯CSS @imports永久链接纯 CSS `@import`小号