@use

Dart Sass: since 1.23.0
LibSass: ✗
Ruby Sass: ✗

Only Dart Sass currently supports @use. Users of other implementations must use the @import rule instead.

@use 规则从其他 Sass 样式表加载混入、函数和变量，并将多个样式表中的 CSS 组合在一起。@use 加载的样式表称为 "模块"。Sass 还提供了内置模块充满有用的功能。

最简单的 @use 规则写作 @use "<url>"，它在给定的 URL 加载模块。以这种方式加载的任何样式都将在编译的 CSS 输出中包含一次，无论这些样式加载了多少次。

¥The simplest @use rule is written @use "<url>", which loads the module at the given URL. Any styles loaded this way will be included exactly once in the compiled CSS output, no matter how many times those styles are loaded.

⚠️ Heads up!

样式表的 @use 规则必须位于 @forward 以外的任何规则之前，包括样式规则。但是，你可以在 @use 规则之前声明变量，以便在配置模块时使用。

¥A stylesheet’s @use rules must come before any rules other than @forward, including style rules. However, you can declare variables before @use rules to use when configuring modules.

SCSS

Sass

CSS

SCSS Syntax// foundation/_code.scss
code {
  padding: .25em;
  line-height: 0;
}
// foundation/_lists.scss
ul, ol {
  text-align: left;

  & & {
    padding: {
      bottom: 0;
      left: 0;
    }
  }
}
// style.scss
@use 'foundation/code';
@use 'foundation/lists';

Sass Syntax// foundation/_code.sass
code
  padding: .25em
  line-height: 0

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

  & &
    padding:
      bottom: 0
      left: 0



// style.sass
@use 'foundation/code'
@use 'foundation/lists'

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

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

加载成员加载成员 permalink

¥Loading Members

你可以通过编写 <namespace>.<variable>、<namespace>.<function>() 或 @include <namespace>.<mixin>() 从另一个模块访问变量、函数和 mixins。默认情况下，命名空间只是模块 URL 的最后一个组成部分。

¥You can access variables, functions, and mixins from another module by writing <namespace>.<variable>, <namespace>.<function>(), or @include <namespace>.<mixin>(). By default, the namespace is just the last component of the module’s URL.

使用 @use 加载的成员（变量、函数和 mixins）仅在加载它们的样式表中可见。其他样式表如果也想访问它们，则需要编写自己的 @use 规则。这有助于轻松准确地弄清楚每个成员来自哪里。如果你想一次从多个文件中加载成员，你可以使用 @forward 规则从一个共享文件中转发所有成员。

¥Members (variables, functions, and mixins) loaded with @use are only visible in the stylesheet that loads them. Other stylesheets will need to write their own @use rules if they also want to access them. This helps make it easy to figure out exactly where each member is coming from. If you want to load members from many files at once, you can use the @forward rule to forward them all from one shared file.

💡 Fun fact:

由于 @use 将命名空间添加到成员名称中，因此在编写样式表时选择非常简单的名称（例如 $radius 或 $width）是安全的。这与旧的 @import 规则不同，旧的 @import 规则鼓励用户编写像 $mat-corner-radius 这样的长名称，以避免与其他库发生冲突，并且它有助于保持样式表清晰易读！

¥Because @use adds namespaces to member names, it’s safe to choose very simple names like $radius or $width when writing a stylesheet. This is different from the old @import rule, which encouraged that users write long names like $mat-corner-radius to avoid conflicts with other libraries, and it helps keep your stylesheets clear and easy to read!

SCSS

Sass

CSS

SCSS Syntax// src/_corners.scss
$radius: 3px;

@mixin rounded {
  border-radius: $radius;
}
// style.scss
@use "src/corners";

.button {
  @include corners.rounded;
  padding: 5px + corners.$radius;
}

Sass Syntax// src/_corners.sass
$radius: 3px

@mixin rounded
  border-radius: $radius

// style.sass
@use "src/corners"

.button
  @include corners.rounded
  padding: 5px + corners.$radius


CSS Output.button {
  border-radius: 3px;
  padding: 8px;
}

选择命名空间选择命名空间 permalink

¥Choosing a Namespace

默认情况下，模块的命名空间只是其 URL 的最后一个组成部分，没有文件扩展名。但是，有时你可能想要选择不同的命名空间 - 你可能想要为经常引用的模块使用更短的名称，或者你可能会加载具有相同文件名的多个模块。你可以通过编写 @use "<url>" as <namespace> 来完成此操作。

¥By default, a module’s namespace is just the last component of its URL without a file extension. However, sometimes you might want to choose a different namespace—you might want to use a shorter name for a module you refer to a lot, or you might be loading multiple modules with the same filename. You can do this by writing @use "<url>" as <namespace>.

SCSS

Sass

CSS

SCSS Syntax// src/_corners.scss
$radius: 3px;

@mixin rounded {
  border-radius: $radius;
}
// style.scss
@use "src/corners" as c;

.button {
  @include c.rounded;
  padding: 5px + c.$radius;
}

Sass Syntax// src/_corners.sass
$radius: 3px

@mixin rounded
  border-radius: $radius

// style.sass
@use "src/corners" as c

.button
  @include c.rounded
  padding: 5px + c.$radius


CSS Output.button {
  border-radius: 3px;
  padding: 8px;
}

你甚至可以通过编写 @use "<url>" as * 来加载没有命名空间的模块。不过，我们建议你只对你编写的样式表执行此操作；否则，他们可能会引入新成员，造成名称冲突！

¥You can even load a module without a namespace by writing @use "<url>" as *. We recommend you only do this for stylesheets written by you, though; otherwise, they may introduce new members that cause name conflicts!

SCSS

Sass

CSS

SCSS Syntax// src/_corners.scss
$radius: 3px;

@mixin rounded {
  border-radius: $radius;
}
// style.scss
@use "src/corners" as *;

.button {
  @include rounded;
  padding: 5px + $radius;
}

Sass Syntax// src/_corners.sass
$radius: 3px

@mixin rounded
  border-radius: $radius

// style.sass
@use "src/corners" as *

.button
  @include rounded
  padding: 5px + $radius


CSS Output.button {
  border-radius: 3px;
  padding: 8px;
}

私有成员私有成员 permalink

¥Private Members

作为样式表作者，你可能不希望你定义的所有成员在样式表之外可用。Sass 可以通过名称以 - 或 _ 开头来轻松定义私有成员。这些成员将在定义它们的样式表中像平常一样工作，但它们不会成为模块的公共 API 的一部分。这意味着加载模块的样式表看不到它们！

¥As a stylesheet author, you may not want all the members you define to be available outside your stylesheet. Sass makes it easy to define a private member by starting its name with either - or _. These members will work just like normal within the stylesheet that defines them, but they won’t be part of a module’s public API. That means stylesheets that load your module can’t see them!

💡 Fun fact:

如果你想让某个成员对整个包而不是单个模块私有，请不要从任何包的入口点（你告诉用户加载以使用你的包的样式表）进行转发其模块。你甚至可以在转发其模块的其余部分的同时进行隐藏该成员！

¥If you want to make a member private to an entire package rather than just a single module, just don’t forward its module from any of your package’s entrypoints (the stylesheets you tell your users to load to use your package). You can even hide that member while forwarding the rest of its module!

SCSS

Sass

SCSS Syntax// src/_corners.scss
$-radius: 3px;

@mixin rounded {
  border-radius: $-radius;
}
// style.scss
@use "src/corners";

.button {
  @include corners.rounded;

  // This is an error! $-radius isn't visible outside of `_corners.scss`.
  padding: 5px + corners.$-radius;
}

Sass Syntax// src/_corners.sass
$-radius: 3px

@mixin rounded
  border-radius: $-radius

// style.sass
@use "src/corners"

.button
  @include corners.rounded

  // This is an error! $-radius isn't visible outside of `_corners.scss`.
  padding: 5px + corners.$-radius

配置配置 permalink

¥Configuration

样式表可以使用 !default 标志定义变量以使其可配置。要加载带有配置的模块，请写入 @use <url> with (<variable>: <value>, <variable>: <value>)。配置的值将覆盖变量的默认值。

¥A stylesheet can define variables with the !default flag to make them configurable. To load a module with configuration, write @use <url> with (<variable>: <value>, <variable>: <value>). The configured values will override the variables’ default values.

SCSS

Sass

CSS

SCSS Syntax// _library.scss
$black: #000 !default;
$border-radius: 0.25rem !default;
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;

code {
  border-radius: $border-radius;
  box-shadow: $box-shadow;
}
// style.scss
@use 'library' with (
  $black: #222,
  $border-radius: 0.1rem
);

Sass Syntax// _library.sass
$black: #000 !default
$border-radius: 0.25rem !default
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default

code
  border-radius: $border-radius
  box-shadow: $box-shadow

// style.sass
@use 'library' with ($black: #222, $border-radius: 0.1rem)




CSS Outputcode {
  border-radius: 0.1rem;
  box-shadow: 0 0.5rem 1rem rgba(34, 34, 34, 0.15);
}

使用混入使用混入 permalink

¥With Mixins

使用 @use ... with 配置模块非常方便，尤其是在使用最初为 @import 规则编写的库时。但它不是特别灵活，我们不建议将其用于更高级的用例。如果你发现自己想要一次配置许多变量，将映射作为配置传递，或者在加载模块后更新配置，请考虑编写一个 mixin 来设置变量，并编写另一个 mixin 来注入你的样式。

¥Configuring modules with @use ... with can be very handy, especially when using libraries that were originally written to work with the @import rule. But it’s not particularly flexible, and we don’t recommend it for more advanced use-cases. If you find yourself wanting to configure many variables at once, pass maps as configuration, or update the configuration after the module is loaded, consider writing a mixin to set your variables instead and another mixin to inject your styles.

SCSS

Sass

CSS

SCSS Syntax// _library.scss
$-black: #000;
$-border-radius: 0.25rem;
$-box-shadow: null;

/// If the user has configured `$-box-shadow`, returns their configured value.
/// Otherwise returns a value derived from `$-black`.
@function -box-shadow() {
  @return $-box-shadow or (0 0.5rem 1rem rgba($-black, 0.15));
}

@mixin configure($black: null, $border-radius: null, $box-shadow: null) {
  @if $black {
    $-black: $black !global;
  }
  @if $border-radius {
    $-border-radius: $border-radius !global;
  }
  @if $box-shadow {
    $-box-shadow: $box-shadow !global;
  }
}

@mixin styles {
  code {
    border-radius: $-border-radius;
    box-shadow: -box-shadow();
  }
}
// style.scss
@use 'library';

@include library.configure(
  $black: #222,
  $border-radius: 0.1rem
);

@include library.styles;

Sass Syntax// _library.sass
$-black: #000
$-border-radius: 0.25rem
$-box-shadow: null

/// If the user has configured `$-box-shadow`, returns their configured value.
/// Otherwise returns a value derived from `$-black`.
@function -box-shadow()
  @return $-box-shadow or (0 0.5rem 1rem rgba($-black, 0.15))


@mixin configure($black: null, $border-radius: null, $box-shadow: null)
  @if $black
    $-black: $black !global
  @if $border-radius
    $-border-radius: $border-radius !global
  @if $box-shadow
    $-box-shadow: $box-shadow !global


@mixin styles
  code
    border-radius: $-border-radius
    box-shadow: -box-shadow()





// style.sass
@use 'library'
@include library.configure($black: #222, $border-radius: 0.1rem)
@include library.styles






CSS Outputcode {
  border-radius: 0.1rem;
  box-shadow: 0 0.5rem 1rem rgba(34, 34, 34, 0.15);
}

重新分配变量重新分配变量 permalink

¥Reassigning Variables

加载模块后，你可以重新分配其变量。

¥After loading a module, you can reassign its variables.

SCSS

Sass

SCSS Syntax// _library.scss
$color: red;
// _override.scss
@use 'library';
library.$color: blue;
// style.scss
@use 'library';
@use 'override';
@debug library.$color;  //=> blue

Sass Syntax// _library.sass
$color: red
// _override.sass
@use 'library'
library.$color: blue
// style.sass
@use 'library'
@use 'override'
@debug library.$color  //=> blue

如果你使用 as * 导入没有命名空间的模块，这甚至可以工作。分配给该模块中定义的变量名将覆盖该模块中其值。

¥This even works if you import a module without a namespace using as *. Assigning to a variable name defined in that module will overwrite its value in that module.

⚠️ Heads up!

内置模块变量（例如 math.$pi）不能重新分配。

¥Built-in module variables (such as math.$pi) cannot be reassigned.

寻找模块寻找模块 permalink

¥Finding the Module

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

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

⚠️ Heads up!

为了确保样式表适用于每个操作系统，Sass 通过 URL（而不是文件路径）加载文件。这意味着你需要使用正斜杠，而不是反斜杠，即使在 Windows 上也是如此。

¥To ensure that stylesheets work on every operating system, Sass loads files by URL, not by file path. This means you need to use forward slashes, not backslashes, even on Windows.

这也意味着 URL 区分大小写，因此即使你使用不区分大小写的文件系统，Sass 也会将 Styles.scss 和 styles.scss 视为不同的模块。确保你的 URL 与磁盘上文件的实际情况匹配，否则你的样式表可能会加载两次，并且肯定无法在其他操作系统上运行。

¥This also means that URLs are case-sensitive, so Sass will consider Styles.scss and styles.scss to be different modules even if you’re using a case-insensitive filesystem. Make sure your URLs match the actual case of the files on disk, or your stylesheets may load twice and definitely won’t work on other operating systems.

加载路径加载路径 permalink

¥Load Paths

所有 Sass 实现都允许用户提供加载路径：Sass 在定位模块时将查找的文件系统上的路径。例如，如果你传递 node_modules/susy/sass 作为加载路径，则可以使用 @use "susy" 加载 node_modules/susy/sass/susy.scss（尽管 pkg: 网址是处理该问题的更好方法）。

¥All Sass implementations allow users to provide load paths: paths on the filesystem that Sass will look in when locating modules. For example, if you pass node_modules/susy/sass as a load path, you can use @use "susy" to load node_modules/susy/sass/susy.scss (although pkg: URLs are a better way to handle that).

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

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

💡 Fun fact:

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

¥Unlike some other languages, Sass doesn’t require that you use ./ for relative imports. Relative imports are always available.

局部局部 permalink

¥Partials

作为约定，仅作为模块加载而不是自行编译的 Sass 文件以 _ 开头（如 _code.scss 中所示）。这些称为部分文件，它们告诉 Sass 工具不要尝试自行编译这些文件。导入部分时可以省略 _。

¥As a convention, Sass files that are only meant to be loaded as modules, 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

如果你在文件夹中写入 _index.scss 或 _index.sass，则当你加载文件夹本身的 URL 时，将自动加载索引文件。

¥If you write an _index.scss or _index.sass in a folder, the index file will be loaded automatically when you load the URL for the folder itself.

SCSS

Sass

CSS

SCSS Syntax// 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
@use 'code';
@use 'lists';
// style.scss
@use 'foundation';

Sass Syntax// 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
@use 'code'
@use 'lists'
// style.sass
@use 'foundation'

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

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

`pkg:` 网址pkg: 网址 permalink

¥pkg: URLs

Sass 使用 pkg: URL 方案加载由各种包管理器分发的样式表。由于 Sass 在具有不同包管理约定的许多不同编程语言的上下文中使用，因此 pkg: URL 几乎没有固定含义。相反，我们鼓励用户实现自定义导入器（使用 JS API 或嵌入式 Sass 协议），以使用原生包管理器的逻辑解析这些 URL。

¥Sass uses the pkg: URL scheme to load stylesheets distributed by various package managers. Since Sass is used in the context of many different programming languages with different package management conventions, pkg: URLs have almost no set meaning. Instead, users are encouraged to implement custom importers (using the JS API or the Embedded Sass protocol) that resolve these URLs using the native package manager’s logic.

这使得 pkg: URL 和使用它们的样式表可以跨不同的语言生态系统移植。无论你是通过 npm（Sass 为其提供了内置 pkg: 导入器）安装 Sass 库，还是通过你能找到的最晦涩的包管理器安装 Sass 库，如果你编写 @use 'pkg:library'，它都会做正确的事情。

¥This allows pkg: URLs and the stylesheets that use them to be portable across different language ecosystems. Whether you’re installing a Sass library via npm (for which Sass provides a built-in pkg: importer) or the most obscure package manager you can find, if you write @use 'pkg:library' it’ll do the right thing.

💡 Fun fact:

pkg: URL 不仅仅适用于 @use。你可以在任何可以加载 Sass 文件的地方使用它们，包括 @forward、meta.load-css()，甚至旧的 @import 规则。

¥pkg: URLs aren’t just for @use. You can use them anywhere you can load a Sass file, including @forward, meta.load-css(), and even the old @import rule.

`pkg:` 导入器的规则pkg: 导入器的规则 permalink

¥Rules for a pkg: Importer

Sass 希望所有 pkg: 导入商都遵守一些通用规则。这些规则有助于确保 pkg: URL 在所有包管理器中得到一致的处理，以便样式表尽可能可移植。

¥There are a few common rules that Sass expects all pkg: importers to follow. These rules help ensure that pkg: URLs are handled consistently across all package managers, so that stylesheets are as portable as possible.

除了自定义导入器的标准规则之外，pkg: 导入器必须仅处理以下非规范 URL：

¥In addition to the standard rules for custom importers, a pkg: importer must only handle non-canonical URLs that:

有方案 pkg，并且

¥have the scheme pkg, and
其路径以包名称开头，并且

¥whose path begins with a package name, and
后面可以选择跟随一个路径，路径段之间用正斜杠分隔。

¥are optionally followed by a path, with path segments separated with a forward slash.

包名称可能包含正斜杠，具体取决于特定的包管理器是否支持。例如，npm 允许使用诸如 @namespace/name 之类的包名称。请注意，包含非字母数字字符的包名称在不同包管理器之间的可移植性可能较差。

¥The package name may contain forward slashes, depending on whether the particular package manager supports that. For example, npm allows package names like @namespace/name. Note that package names that contain non-alphanumeric characters may be less portable across different package managers.

pkg: 导入商必须拒绝以下模式：

¥pkg: importers must reject the following patterns:

路径以 / 开头的 URL。

¥A URL whose path begins with /.
具有非空/空用户名、密码、主机、端口、查询或片段的 URL。

¥A URL with non-empty/null username, password, host, port, query, or fragment.

如果 pkg: 导入器遇到违反其自己的包管理器约定但不违反上述规则的 URL，它应该拒绝加载该 URL，而不是抛出错误。这允许用户在必要时同时使用多个 pkg: 导入器。

¥If pkg: importer encounters a URL that violates its own package manager’s conventions but not the above rules, it should just decline to load that URL rather than throwing an error. This allows users to use multiple pkg: importers at once if necessary.

Node.js 包导入器Node.js 包导入器 permalink

¥Node.js Package Importer

Dart Sass: since 1.71.0
LibSass: ✗
Ruby Sass: ✗

由于 Sass 与 Node.js 生态系统一起使用最广泛，因此它附带了一个 pkg: 导入器，该导入器使用与 Node.js 相同的算法来加载 Sass 样式表。默认情况下此功能不可用，但打开很容易：

¥Because Sass is most widely-used alongside the Node.js ecosystem, it comes with a pkg: importer that uses the same algorithm as Node.js to load Sass stylesheets. This isn’t available by default, but it’s easy to turn on:

如果你使用 JavaScript API，只需将 new NodePackageImporter() 添加到 importers 选项即可。

¥If you’re using the JavaScript API, just add new NodePackageImporter() to the importers option.
如果你使用 Dart API，请将 NodePackageImporter() 添加到 importers 选项。

¥If you’re using the Dart API, add NodePackageImporter() to the importers option.
如果你使用命令行，请传递 --pkg-importer=node。

¥If you’re using the command line, pass --pkg-importer=node.

如果加载 pkg: URL，Node.js pkg: 导入器将查看其 package.json 文件以确定要加载哪个 Sass 文件。它将按顺序检查：

¥If you load a pkg: URL, the Node.js pkg: importer will look at its package.json file to determine which Sass file to load. It will check in order:

"exports" 场，具有条件 "sass"、"style" 和 "default"。这是包今后公开 Sass 入口点的推荐方法。

¥The "exports" field, with the conditions "sass", "style", and "default". This is the recommended way for packages to expose Sass entrypoints going forward.
"sass" 字段或 "style" 字段，应该是 Sass 文件的路径。仅当 pkg: URL 没有子路径时，这才有效 - pkg:library 将加载 "sass" 字段中列出的文件，但 pkg:library/button 将从包的根加载 button.scss。

¥The "sass" field or the "style" field, which should be a path to a Sass file. This only works if the pkg: URL doesn’t have a subpath—pkg:library will load the file listed in the "sass" field, but pkg:library/button will load button.scss from the root of the package.
包根目录中的索引文件这也仅在 pkg: URL 没有子路径时有效。

¥The index file at the root of the package This also only works if the pkg: URL doesn’t have a subpath.

Node.js pkg: 导入器支持全系列 "exports" 功能，因此你还可以为不同的子路径指定不同的位置（注意键必须包含文件扩展名）：

¥The Node.js pkg: importer supports the full range of "exports" features, so you can also specify different locations for different subpaths (note that the key must include the file extension):

{
  "exports": {
    ".": {
      "sass": "styles/index.scss",
    },
    "./button.scss": {
      "sass": "styles/button.scss",
    },
    "./accordion.scss": {
      "sass": "styles/accordion.scss",
    }
  }
}

…甚至模式：

¥…or even patterns:

{
  "exports": {
    ".": {
      "sass": "styles/index.scss",
    },
    "./*.scss": {
      "sass": "styles/*.scss",
    },
  }
}

加载 CSS加载 CSS permalink

¥Loading CSS

除了加载 .sass 和 .scss 文件之外，Sass 还可以加载普通的旧 .css 文件。

¥In addition to loading .sass and .scss files, Sass can load plain old .css files.

SCSS

Sass

CSS

SCSS Syntax// code.css
code {
  padding: .25em;
  line-height: 0;
}
// style.scss
@use 'code';

Sass Syntax// code.css
code {
  padding: .25em;
  line-height: 0;
}
// style.sass
@use 'code'

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

作为模块加载的 CSS 文件不允许任何特殊的 Sass 功能，因此不能公开任何 Sass 变量、函数或 mixins。为了确保作者不会意外地在 CSS 中写入 Sass，所有不是有效 CSS 的 Sass 功能都会产生错误。否则，CSS 将按原样渲染。甚至可以是扩展！

¥CSS files loaded as modules don’t allow any special Sass features and so can’t expose any Sass variables, functions, or mixins. 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!

与 `@import` 的差异与 @import 的差异 permalink

¥Differences From @import

@use 规则旨在取代旧的 @import 规则，但其特意设计为以不同的方式工作。以下是两者之间的一些主要区别：

¥The @use rule is intended to replace the old @import rule, but it’s intentionally designed to work differently. Here are some major differences between the two:

@use 仅使变量、函数和 mixin 在当前文件的范围内可用。它永远不会将它们添加到全局作用域中。这使得你可以轻松找出 Sass 文件引用的每个名称的来源，并且意味着你可以使用较短的名称，而不会产生任何冲突的风险。

¥@use only makes variables, functions, and mixins available within the scope of the current file. It never adds them to the global scope. This makes it easy to figure out where each name your Sass file references comes from, and means you can use shorter names without any risk of collision.
@use 仅加载每个文件一次。这可以确保你不会意外多次重复依赖的 CSS。

¥@use only ever loads each file once. This ensures you don’t end up accidentally duplicating your dependencies’ CSS many times over.
@use 必须出现在文件的开头，并且不能嵌套在样式规则中。

¥@use must appear at the beginning your file, and cannot be nested in style rules.
每个 @use 规则只能有一个 URL。

¥Each @use rule can only have one URL.
@use 需要在其 URL 周围加上引号，即使使用缩进语法时也是如此。

¥@use requires quotes around its URL, even when using the indented syntax.

@use

⚠️ Heads up!

SCSS Syntax

Sass Syntax

CSS Output

加载成员加载成员 permalink

💡 Fun fact:

SCSS Syntax

Sass Syntax

CSS Output

选择命名空间选择命名空间 permalink

SCSS Syntax

Sass Syntax

CSS Output

SCSS Syntax

Sass Syntax

CSS Output

私有成员私有成员 permalink

💡 Fun fact:

SCSS Syntax

Sass Syntax

配置配置 permalink

SCSS Syntax

Sass Syntax

CSS Output

使用混入使用混入 permalink

SCSS Syntax

Sass Syntax

CSS Output

重新分配变量重新分配变量 permalink

SCSS Syntax

Sass Syntax

⚠️ Heads up!

寻找模块寻找模块 permalink

⚠️ Heads up!

加载路径加载路径 permalink

💡 Fun fact:

局部局部 permalink

索引文件索引文件 permalink

SCSS Syntax

Sass Syntax

CSS Output

pkg: 网址pkg: 网址 permalink

💡 Fun fact:

pkg: 导入器的规则pkg: 导入器的规则 permalink

Node.js 包导入器Node.js 包导入器 permalink

加载 CSS加载 CSS permalink

SCSS Syntax

Sass Syntax

CSS Output

与 @import 的差异与 @import 的差异 permalink

`pkg:` 网址pkg: 网址 permalink

`pkg:` 导入器的规则pkg: 导入器的规则 permalink

与 `@import` 的差异与 @import 的差异 permalink