@use

兼容性：
Dart·Sass（Dart Sass）
从1.23.0开始
LibSass
✗
rubySass
✗

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

该@use规则从其他Sass样式表加载mixins，函数和变量，并将多个样式表css组合在一起。加载的样式表@use称为“模块”。Sass还提供了内置模块，其中包含有用的功能。

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

Head️抬头！

样式表的@use规则，必须拿出比任何其他规则之前@forward，包括样式规则。但是，您可以@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
@use 'foundation/code';
@use '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
@use 'foundation/code'
@use 'foundation/lists'

CSS  输出

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

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

载入会员永久链接载入会员

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

加载的成员（变量，函数和混合）@use仅在加载它们的样式表中可见。如果其他样式表也要@use访问它们，则需要编写自己的规则。这有助于轻松确定每个成员的确切来源。如果要一次从多个文件加载成员，则可以使用该@forward规则从一个共享文件转发所有成员。

???? 有趣的事实：

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

SCSS  语法

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

@mixin rounded {
  border-radius: $radius;
}

// style.scss
@use "src/corners";

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

Sass语法

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

@mixin rounded
  border-radius: $radius


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

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

CSS  输出

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

选择命名空间固定链接选择命名空间

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

SCSS  语法

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

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

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

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

SCSS  语法

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

@mixin rounded {
  border-radius: $radius;
}

// style.scss
@use "src/corners" as *;

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

Sass语法

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

@mixin rounded
  border-radius: $radius


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

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

CSS  输出

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

私人会员永久链接私人会员

作为样式表作者，您可能不希望您定义的所有成员在样式表之外都可用。使用Sass可以轻松地定义私有成员，方法是使用-或开头_。这些成员将在定义它们的样式表中正常工作，但是它们不会成为模块公共API的一部分。这意味着加载模块的样式表看不到它们！

???? 有趣的事实：

如果要使成员成为整个软件包的私有成员，而不是单个模块的私有成员，则不要从任何软件包的入口点（告诉用户加载以使用软件包的样式表）转发其模块。您甚至可以在转发其其余模块时隐藏该成员！

SCSS  语法

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

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

配置永久链接配置

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

SCSS  语法

// _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语法

// _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  输出

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

使用Mixins永久链接使用Mixins

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

SCSS  语法

// _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语法

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


@include styles
  code
    border-radius: $border-radius
    box-shadow: $box-shadow






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

CSS  输出

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

查找模块永久链接查找模块

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

Head️抬头！

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

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

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

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

???? 有趣的事实：

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

Partials永久链接 Partials

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

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

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

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
@use 'code';
@use 'lists';

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

// style.sass
@use 'foundation'

CSS  输出

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

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

加载CSS永久链接加载  CSS

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

SCSS  语法

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

// style.scss
@use 'code';

Sass语法

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

// style.sass
@use 'code'

CSS  输出

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

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!