自学教程@use规则从其他 Sass 样式表中加载mixin、函数和变量，并将来自多个样式表的 CSS 组合在一起。@use加载的样式表称为“模块”。Sass 还提供了充满有用功能的内置模块。
样式表的@use规则必须排在除@forward以外的任何规则之前，包括样式规则。但是，您可以在@use配置模块时要使用的规则之前声明变量。
语法：@use "<url>"
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';编译为 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>(), or @include <namespace>.<mixin>().
SCSS
// src/_corners.scss
$radius: 3px;
@mixin rounded {
border-radius: $radius;
}
// style.scss
@use "src/corners";
.button {
@include corners.rounded;
padding: 5px + corners.$radius;
}编译为 CSS 结果：
CSS
.button {
border-radius: 3px;
padding: 8px;
}选择命名空间
语法：@use "<url>" as <namespace>
SCSS
// src/_corners.scss
$radius: 3px;
@mixin rounded {
border-radius: $radius;
}SCSS
// style.scss
@use "src/corners" as c;
.button {
@include c.rounded;
padding: 5px + c.$radius;
}编译为 CSS 结果：
CSS
.button {
border-radius: 3px;
padding: 8px;
}也可以用 @use "<url>" as * ，但不建议，这样容易导致名称冲突。
私有成员
Sass可以轻松地定义私有成员，方法是使用-或开头_，这些成员将在定义它们的样式表中正常工作，但是它们不会成为模块公共API的一部分。
SCSS
// src/_corners.scss
$-radius: 3px;
@mixin rounded {
border-radius: $-radius;
}SCSS
// 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>)。配置的值将覆盖变量的默认值。
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;
}SCSS
// style.scss
@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
使用配置模块@use ... with 非常方便
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();
}
}SCSS
// style.scss
@use 'library';
@include library.configure(
$black: #222,
$border-radius: 0.1rem
);
@include library.styles;编译为 CSS 结果：
CSS
code {
border-radius: 0.1rem;
box-shadow: 0 0.5rem 1rem rgba(34, 34, 34, 0.15);
}查找模块
为你加载的每个样式表写出绝对 URL 并不有趣，所以 Sass 查找模块的算法使它变得更容易一些。对于初学者来说，您不必显式写出要加载的文件的扩展名;@use“变量”将自动加载 variables.scss、variables.sass、或 variables.css。
加载路径
Sass 始终总是相对于当前文件首先加载模块。仅当不存在与模块URL匹配的相对文件时，才使用加载路径。
Partials
按照惯例，仅作为模块加载而不是自行编译的 Sass 文件以 _ 开头（如 code.scss 中所示）。这些被称为部分文件，它们告诉 Sass 工具不要尝试自行编译这些文件。导入部分时可以省略 。
索引文件
如果在文件夹中写入_index.scss或_index.sass，则在加载文件夹本身的URL时将自动加载索引文件。
// 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';编译为 CSS 结果：
CSS
code {
padding: .25em;
line-height: 0;
}
ul, ol {
text-align: left;
}
ul ul, ol ol {
padding-bottom: 0;
padding-left: 0;
}
加载 CSS
除了加载.sass和.scss文件外，Sass还可以加载普通的旧 .css文件。
SCSS
// code.css
code {
padding: .25em;
line-height: 0;
}
// style.scss
@use 'code';编译为 CSS 结果：
CSS
code {
padding: .25em;
line-height: 0;
}
分享笔记