@use

该@use规则，是从其他 Sass 样式表中加载 mixins、函数和变量，并将来自多个样式表的 CSS 组合在一起。@use加载的样式表被称为“模块”。Sass 还提供了很多有用的内置模块。

最简单的规则是@use""，加载模块。以这种方式加载的任何样式，都将在编译的 CSS 输出中仅包含一次，无论这些样式被加载多少次。

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

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

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

加载成员

您可以通过编写.、.()或@include.()，来访问另一个模块中的变量、函数和混合。默认情况下，命名空间只是模块 URL 的最后一个组成部分。

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

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

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

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

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

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

选择命名空间

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

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

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

您甚至可以通过编写@use "" as *.不过，我们建议您只对您编写的样式表执行此操作；否则，他们可能会引入导致名称冲突的新成员！

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

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

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

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

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

私有成员

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

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

配置

样式表可以使用!default标志定义变量，以使其可配置。要加载带有配置的模块，使用@usewith加载:,:样式，配置的值将覆盖变量的默认值。

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

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

使用 Mixin

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

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

重新赋值变量

加载模块后，您可以重新赋值其变量。

// _library.scss
$color: red;

// _override.scss
@use 'library';
library.$color: blue;

// style.scss
@use 'library';
@use 'override';
@debug library.$color;  //=> blue

如果您使用as *，给该模块中定义的变量赋值，将覆盖其在该模块中的值。

⚠️注意！
无法重新给内置模块变量赋值（例如）math.$pi。

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com