@import

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

¥Sass imports have the same syntax as CSS imports, except that they allow multiple imports to be separated by commas rather than requiring each one to have its own @import. Also, in the indented syntax, imported URLs aren’t required to have quotes.

// 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';

// 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

code {
  padding: .25em;
  line-height: 0;
}

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

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

¥When Sass imports a file, that file is evaluated as though its contents appeared directly in place of the @import. Any mixins, functions, and variables from the imported file are made available, and all its CSS is included at the exact point where the @import was written. What’s more, any mixins, functions, or variables that were defined before the @import (including from other @imports) are available in the imported stylesheet.

查找文件查找文件 permalink

¥Finding the File

为导入的每个样式表写出绝对 URL 没有任何乐趣，因此 Sass 查找要导入的文件的算法使它变得更容易一些。对于初学者来说，你不必明确写出要导入的文件的扩展名；@import "variables" 将自动加载 variables.scss、variables.sass 或 variables.css。

¥It wouldn’t be any fun to write out absolute URLs for every stylesheet you import, so Sass’s algorithm for finding a file to import makes it a little easier. For starters, you don’t have to explicitly write out the extension of the file you want to import; @import "variables" will automatically load variables.scss, variables.sass, or variables.css.

加载路径加载路径 permalink

¥Load Paths

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

¥All Sass implementations allow users to provide load paths: paths on the filesystem that Sass will look in when resolving imports. For example, if you pass node_modules/susy/sass as a load path, you can use @import "susy" to load node_modules/susy/sass/susy.scss.

不过，导入始终首先相对于当前文件进行解析。仅当不存在与导入匹配的相对文件时才会使用加载路径。这可以确保你在添加新库时不会意外地弄乱相关导入。

¥Imports will always be resolved relative to the current file first, though. Load paths will only be used if no relative file exists that matches the import. This ensures that you can’t accidentally mess up your relative imports when you add a new library.

局部局部 permalink

¥Partials

按照惯例，仅用于导入而不是自行编译的 Sass 文件以 _ 开头（如 _code.scss 所示）。这些称为部分文件，它们告诉 Sass 工具不要尝试自行编译这些文件。导入部分时可以省略 _。

¥As a convention, Sass files that are only meant to be imported, not compiled on their own, begin with _ (as in _code.scss). These are called partials, and they tell Sass tools not to try to compile those files on their own. You can leave off the _ when importing a partial.

索引文件索引文件 permalink

¥Index Files

兼容性:

Dart Sass

✓

LibSass

since 3.6.0

Ruby Sass

since 3.6.0

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

¥If you write an _index.scss or _index.sass in a folder, when the folder itself is imported that file will be loaded in its place.

// 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';

// 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

code {
  padding: .25em;
  line-height: 0;
}

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

定制导入器定制导入器 permalink

¥Custom Importers

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

¥All Sass implementations provide a way to define custom importers, which control how @imports locate stylesheets:

• Node Sass 和 npm 上的 Dart Sass 提供 importer 选项 作为其 JS API 的一部分。

  ¥Node Sass and Dart Sass on npm provide an importer option as part of their JS API.

• pub 上的 Dart Sass 提供了一个抽象的 Importer 类，可以通过自定义导入器进行扩展。

  ¥Dart Sass on pub provides an abstract Importer class that can be extended by a custom importer.

• Ruby Sass 提供了一个抽象的 Importers::Base 类，可以通过自定义导入器进行扩展。

  ¥Ruby Sass provides an abstract Importers::Base class that can be extended by a custom importer.

嵌套嵌套 permalink

¥Nesting

导入通常写在样式表的顶层，但并非必须如此。它们也可以嵌套在 样式规则 或 纯 CSS at 规则 内。导入的 CSS 嵌套在该上下文中，这使得嵌套导入对于将 CSS 块的范围限定到特定元素或媒体查询非常有用。嵌套导入中定义的顶层 混入、函数 和 变量 仅在嵌套上下文中可用。

¥Imports are usually written at the top level of a stylesheet, but they don’t have to be. They can nested within style rules or plain CSS at-rules as well. The imported CSS is nested in that context, which makes nested imports useful for scoping a chunk of CSS to a particular element or media query. Top-level mixins, functions, and variables defined in the nested import are only available in the nested context.

// _theme.scss
pre, code {
  font-family: 'Source Code Pro', Helvetica, Arial;
  border-radius: 4px;
}

// style.scss
.theme-sample {
  @import "theme";
}

// _theme.sass
pre, code
  font-family: 'Source Code Pro', Helvetica, Arial
  border-radius: 4px

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

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

// _theme.scss
ul li {
  $padding: 16px;
  padding-left: $padding;
  [dir=rtl] & {
    padding: {
      left: 0;
      right: $padding;
    }
  }
}

// style.scss
.theme-sample {
  @import "theme";
}

// _theme.sass
ul li
  $padding: 16px
  padding-left: $padding
  [dir=rtl] &
    padding:
      left: 0
      right: $padding

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

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

导入 CSS导入 CSS permalink

¥Importing CSS

兼容性:

Dart Sass

since 1.11.0

LibSass

partial

Ruby Sass

✗

➤

除了导入 .sass 和 .scss 文件之外，Sass 还可以导入普通的旧 .css 文件。唯一的规则是导入不得显式包含 .css 扩展名，因为它用于指示 纯 CSS @import。

¥In addition to importing .sass and .scss files, Sass can import plain old .css files. The only rule is that the import must not explicitly include the .css extension, because that’s used to indicate a plain CSS @import.

// code.css
code {
  padding: .25em;
  line-height: 0;
}

// style.scss
@import 'code';

// code.css
code {
  padding: .25em;
  line-height: 0;
}

// style.sass
@import code

code {
  padding: .25em;
  line-height: 0;
}

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

¥CSS files imported by Sass don’t allow any special Sass features. In order to make sure authors don’t accidentally write Sass in their CSS, all Sass features that aren’t also valid CSS will produce errors. Otherwise, the CSS will be rendered as-is. It can even be extended!

纯 CSS @import纯 CSS @import permalink

¥Plain CSS @imports

兼容性:

Dart Sass

✓

LibSass

partial

Ruby Sass

✓

➤

因为 @import 也在 CSS 中定义，所以 Sass 需要一种编译纯 CSS @import 的方法，而无需在编译时尝试导入文件。为了实现这一点，并确保 SCSS 尽可能成为 CSS 的超集，Sass 会将具有以下特性的任何 @import 编译为纯 CSS 导入：

¥Because @import is also defined in CSS, Sass needs a way of compiling plain CSS @imports without trying to import the files at compile time. To accomplish this, and to ensure SCSS is as much of a superset of CSS as possible, Sass will compile any @imports with the following characteristics to plain CSS imports:

• 导入 URL 以 .css 结尾的位置。

  ¥Imports where the URL ends with .css.

• 导入 URL 以 http:// 或 https:// 开头的位置。

  ¥Imports where the URL begins http:// or https://.

• URL 写为 url() 的导入。

  ¥Imports where the URL is written as a url().

• 具有媒体查询的导入。

  ¥Imports that have media queries.

• SCSS
• Sass
• CSS

Playground

SCSS Syntax

@import "theme.css";
@import "http://fonts.googleapis.com/css?family=Droid+Sans";
@import url(theme);
@import "landscape" screen and (orientation: landscape);

Playground

Sass Syntax

@import "theme.css"
@import "http://fonts.googleapis.com/css?family=Droid+Sans"
@import url(theme)
@import "landscape" screen and (orientation: landscape)

CSS Output

@import "theme.css";
@import "http://fonts.googleapis.com/css?family=Droid+Sans";
@import url(theme);
@import "landscape" screen and (orientation: landscape);

插值插值 permalink

¥Interpolation

尽管 Sass 导入不能使用 插值法（以确保始终可以分辨 混入、函数 和 变量 来自何处），但纯 CSS 导入可以。这使得动态生成导入成为可能，例如基于 mixin 参数。

¥Although Sass imports can’t use interpolation (to make sure it’s always possible to tell where mixins, functions, and variables come from), plain CSS imports can. This makes it possible to dynamically generate imports, for example based on mixin parameters.

• SCSS
• Sass
• CSS

Playground

SCSS Syntax

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

@include google-font("Droid Sans");

Playground

Sass Syntax

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


@include google-font("Droid Sans")

CSS Output

@import url("http://fonts.googleapis.com/css?family=Droid Sans");

导入和模块导入和模块 permalink

¥Import and Modules

兼容性:

Dart Sass

since 1.23.0

LibSass

✗

Ruby Sass

✗

➤

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

¥Sass’s module system integrates seamlessly with @import, whether you’re importing a file that contains @use rules or loading a file that contains imports as a module. We want to make the transition from @import to @use as smooth as possible.

导入模块系统文件导入模块系统文件 permalink

¥Importing a Module-System File

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

¥When you import a file that contains @use rules, the importing file has access to all members (even private members) defined directly in that file, but not any members from modules that file has loaded. However, if that file contains @forward rules, the importing file will have access to forwarded members. This means that you can import a library that was written to be used with the module system.

仅导入文件仅导入文件 permalink

¥Import-Only Files

对 @use 有意义的 API 可能对 @import 没有意义。例如，@use 默认为所有成员添加命名空间，因此你可以安全地使用短名称，但 @import 不会，因此你可能需要更长的名称。如果你是库作者，你可能会担心如果你更新库以使用新的模块系统，你现有的基于 @import 的用户将会崩溃。

¥An API that makes sense for @use might not make sense for @import. For example, @use adds a namespace to all members by default so you can safely use short names, but @import doesn’t so you might need something longer. If you’re a library author, you may be concerned that if you update your library to use the new module system, your existing @import-based users will break.

为了使这更容易，Sass 还支持仅导入文件。如果你将文件命名为 <name>.import.scss，则只会在导入时加载该文件，而不会为 @use 加载该文件。这样，你可以保留 @import 用户的兼容性，同时仍然为新模块系统的用户提供良好的 API。

¥To make this easier, Sass also supports import-only files. If you name a file <name>.import.scss, it will only be loaded for imports, not for @uses. This way, you can retain compatibility for @import users while still providing a nice API for users of the new module system.

// _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-*;

// _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-*

通过导入配置模块通过导入配置模块 permalink

¥Configuring Modules Through Imports

兼容性:

Dart Sass

since 1.24.0

LibSass

✗

Ruby Sass

✗

你可以通过在首先加载该模块的 @import 之前定义全局变量来通过 @import 加载 配置模块。

¥You can configure modules that are loaded through an @import by defining global variables prior the @import that first loads that module.

// _library.scss
$color: blue !default;

a {
  color: $color;
}

// _library.import.scss
@forward 'library' as lib-*;

// style.sass
$lib-color: green;
@import "library";

$color: blue !default

a
  color: $color

// _library.import.sass
@forward 'library' as lib-*

// style.sass
$lib-color: green
@import "library"

a {
  color: green;
}

加载包含导入的模块加载包含导入的模块 permalink

¥Loading a Module That Contains Imports

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

¥When you use @use (or @forward) load a module that uses @import, that module will contain all the public members defined by the stylesheet you load and everything that stylesheet transitively imports. In other words, everything that’s imported is treated as though it were written in one big stylesheet.

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

¥This makes it easy to convert start using @use in a stylesheet even before all the libraries you depend on have converted to the new module system. Be aware, though, that if they do convert their APIs may well change!