【SCSS】use的详细使用规则

目录

• @use
• • 加载成员
  • 选择命名空间
  • 私有成员
  • 配置
  • [使用 Mixin](#使用 Mixin)
  • 重新赋值变量

@use

从其他 Sass 样式表中加载 mixins、函数和变量，并将来自多个样式表的 CSS 组合在一起。@use加载的样式表被称为"模块"。

加载成员

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

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

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

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

选择命名空间

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

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

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

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

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

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

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

私有成员

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

// 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标志定义变量，以使其可配置。要加载带有配置的模块，使用@use<url>with加载<variable>:<value>,<variable>:<value>样式，配置的值将覆盖变量的默认值。

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

使用 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 *，给该模块中定义的变量赋值，将覆盖其在该模块中的值。