引入SASS模块

SASS刚刚启动了您可能会从其他语言中识别的主要新功能：模块系统。对于@Import来说，这是向前迈出的一大步。最常用的野味之一。虽然当前的@Import规则允许您拉动第三方软件包，并将Sass分为可管理的“部分”，但它有一些限制：

• @Import也是CSS功能，差异可能令人困惑
• 如果您@Import多次使用相同的文件，则它可能会减慢汇编，导致冲突并生成重复输出。
• 一切都在全局名称空间中，包括第三方软件包 - 因此，我的color（）函数可能会覆盖您现有的color（）函数，反之亦然。
• 当您使用诸如color（）的函数时。不可能确切知道它的定义位置。它来自哪个@Import？

SASS软件包作者（像我一样）试图通过手动将我们的变量和功能前缀来解决名称空间问题，但是SASS模块是一个更强大的解决方案。简而言之，@Import将被更明确的@USE和@forward规则替换。在接下来的几年中，Sass @Import将被弃用，然后删除。您仍然可以使用CSS导入，但不会由Sass编译。不用担心，有一个迁移工具可以帮助您升级！

用@USE导入文件

@USE'buttons';

新的@USE类似于@Import。但是有一些明显的差异：

• 该文件仅导入一次，无论您在项目中使用多少次。
• 从下划线（_）或连字符（ - ）开始的变量，混合素和功能（Sass称为“成员”）被视为私有，而不是导入。
• 来自使用的文件（在这种情况下为button.scss）的成员仅在本地可用，但不传递给未来进口。
• 同样，@Extends只会应用链条；在导入的文件中扩展选择器，但不扩展导入该文件的文件。
• 所有导入的成员默认为命名。

当我们 @使用文件时，SASS会根据文件名自动生成名称空间：

 @USE'buttons'; //创建一个“按钮”名称空间
@use'表单'; //创建一个“形式”名称空间

现在，我们可以访问两个按钮。scssand forms.scssss.scss-但在导入之间没有传输访问：forms.scss仍然无法访问按钮中定义的变量。Scs.scss.scss。由于导入的功能是命名的，因此我们必须使用新的时期划分语法来访问它们：

 //变量：。$变量
$ btn-color：按钮。$颜色;
$ form-b​​order：form. $ input-broder;

//函数： .function（）
$ btn-background：buttons.background（）;
$ form-b​​order：forms.border（）;

// mixins：@include  .mixin（）（）
@include buttons.submit（）;
@include forms.input（）;

我们可以通过将其添加为向导入更改或删除默认名称空间：

 @USE'按钮'as *; //星星删除任何名称空间
@use'forms'作为f;

$ btn-color：$ color; //按钮。$颜色没有名称空间
$ form-b​​order：f。$ input-broder; //表单。带自定义名称空间的$输入仪

使用AS *在根名称空间中添加一个模块，因此不需要前缀，但是这些成员仍在本地范围范围内范围范围内。

导入内置的SASS模块

内部SASS功能也已移至模块系统，因此我们可以完全控制全局名称空间。有几个内置模块 - 数学，颜色，字符串，列表，地图，选择器和元模块 - 必须在文件使用之前明确导入：

 @USE'SASS：MATH';
$一半：Math.percentage（1/2）;

SASS模块也可以导入到全局名称空间：

 @USE'SASS：MATH'as *;
$一半：百分比（1/2）;

内部功能已经具有前缀的名称，例如map-get或str-Index。可以在不复制前缀的情况下使用：

 @USE'SASS：MAP';
@USE'SASS：String';
$ map-get：map.get（（'键'：'value'），'键'）;
$ str-index：string.index（'string'，'i'）;

您可以在SASS模块规范中找到内置模块，功能和名称更改的完整列表。

新的和更改的核心功能

作为附带的好处，这意味着SASS可以安全地添加新的内部混合素和功能而不会引起名称冲突。此版本中最令人兴奋的例子是一个sass：元混合蛋白称为load-css（）。这与@USE相似，但仅返回生成的CSS输出，并且可以在我们代码中的任何地方动态使用：

 @USE'SASS：META';
$主题名称：“黑暗”；

[data-theme ='＃{$ tremy-name}'] {
  @include meta.load-css（$ themem-name）;
}

第一个参数是一个模块URL（例如@use），但可以通过变量动态更改，甚至包括插值，例如主题-USTEM-＃{$ name}。第二个（可选）参数接受配置值地图：

 //加载前在“主题/dark”中配置$ base-color变量
@include meta.load-css（
  “主题/黑暗”， 
  $ with ：（'base-color'：rebeccapurple）
）；

$ with参数接受加载模块中任何变量的配置键和值，如果这两者都是：

• 一个不以_或 - （现在用来表示隐私）开头的全局变量）
• 标记为！默认值，要配置

// them/_dark.scss
$ base-color：black！默认值； //可用于配置
$ _private：true！默认值; //不可用，因为私人
$ config：false; //不可用，因为未标记为！默认值

请注意，“基本”键将设置$ base-color变量。

还有两个SASS：元函数是新的：模块 - 变量（）和模块 - 函数（）。每个都从已经符合的模块中返回成员名称和值的地图。这些接受一个与模块名称空间匹配的参数：

 @use'表单';

$ form-vars：模块变量（'forms'）;
//（（
//纽扣彩色：蓝色，
//输入 -  border：薄，
//）

$ form-intuntions：模块 - 函数（'forms'）;
//（（
//背景：获取功能（'背景'），
//边界：获取功能（'Border'），
//）

其他几个SASS：META函数 - 全局变量 - exists（），function-exists（），mixin-exists（）和get-function（） - 将获得其他$模块参数，允许我们明确检查每个名称空间。

调整和缩放颜色

Sass：颜色模块也有一些有趣的警告，因为我们试图摆脱一些遗产问题。许多遗产捷径像Lighten（）。或者现在对调整态（）进行弃用，以支持显式color.adjust（）和color.scale（）函数：

 //以前减轻（红色，20％）
$ LIGHT-RED：COLOR.ADJUST（红色，$ Lightness：20％）;

//以前的调整 - 纽带（红色，180摄氏度）
$补充：颜色。

其中一些旧功能（例如调节性）是多余的，不必要的。其他人 - 像淡化。变暗。饱和。等等 - 需要通过更好的内部逻辑进行重新构建。原始功能基于调整（）。使用线性数学：在上面的示例中，将当前的红色轻度添加20％。在大多数情况下，我们实际上希望相对于当前价值扩展（）轻度缩放一百分点：

 // 20％到白色的距离，而不是当前轻度20
$ LIGHT-RED：COLOR.SCALE（红色，$ Lightness：20％）;

一旦完全弃用和删除，这些快捷函数最终将以基于color.scale（）而不是color.adjust（）的新行为重新出现SASS：颜色。这是在阶段发生的，以避免突然倒退的变化。同时，我建议您手动检查您的代码，以查看color.scale（）可能对您更有效的位置。

配置导入的库

第三方或可重复使用的库通常会带有默认的全局配置变量供您覆盖。我们曾经在导入之前用变量来做到这一点：

 // _buttons.scss
$颜色：蓝色！默认值；

// old.scss
$颜色：红色；
@Import'按钮';

由于使用的模块不再可以访问本地变量，因此我们需要一种设置这些默认值的新方法。我们可以通过将配置映射添加到@USE：

 @USE'按钮'with（（
  $颜色：红色，
  $样式：'flat'，
）；

这类似于load-css（）中的参数$。但是，我们使用变量本身，而不是使用变量名称，而是从$开始。

我喜欢这是多么明确的配置，但是有一个规则使我绊倒了几次：只能将模块配置一次，这是第一次使用它。即使对于@Import，进口订单对于Sass仍然很重要。但是这些问题总是默默失败。现在，我们有一个明确的错误，这既好，有时令人惊讶。确保在任何“入口点”文件（导入所有部分的中央文档）中首先将库@USE和配置，以便这些配置在库的其他@USE之前进行编译。

（当前）不可能将配置“链”配置在一起，同时保持它们可编辑，但是您可以将配置的模块和扩展名包装，并将其作为新模块传递。

用@forward传递文件

我们并不总是需要使用文件并访问其成员。有时我们只想将其传递给未来的进口。假设我们有多个与形式相关的部分，我们希望将它们全部导入一个名称空间。我们可以用@forward做到这一点：

 // forms/_index.scss
@forward'input';
@forward'textarea';
@forward'select';
@forward的“按钮”;

当前文档中没有转发文件的成员，也没有创建名称空间，但是当另一个文件想要@USE或@forward整个集合时，这些变量，函数和Mixins将可用。如果转发的部分包含实际的CSS，则它也将通过无生成输出直至使用软件包的情况下传递。那时，它将被视为具有单个名称空间的单个模块：

 // styles.scss
@use'表单'; //在“形式”名称空间中导入所有转发成员

注意：如果您要求SASS导入目录，它将寻找名为索引或_index的文件）

默认情况下，所有公共成员将使用一个模块转发。但是，我们可以通过添加表演或隐藏子句来更具选择性，并命名特定的成员以包括或排除：

 //仅转发“输入”边框（）mixin和$ border-color变量
@forward的“输入”节目边界，$ border-color;

//转发所有“按钮”成员 *除了 * gradient（）函数
@forward'按钮'隐藏梯度；

注意：当功能和混合物共享名称时，它们会显示并隐藏在一起。

为了澄清来源，或避免在转发模块之间命名冲突，我们可以在转发时使用部分前缀成员：

 // forms/_index.scss
// @forward“ <url>”为<prefix>  - *;
//假设两个模块都包含一个背景（）mixin
@forward'输入'作为输入 - *;
@forward的“按钮”为btn-*;

// style.scss
@use'表单';
@include forms.input-background（）;
@include forms.btn-background（）;</prefix></url>

而且，如果需要的话，我们始终可以通过添加两个规则来@USE和@forward相同的模块：

 @forward'forms';
@use'表单';

如果您想将库与配置或任何其他工具包装在将其传递给其他文件之前，这一点尤其有用。它甚至可以帮助简化导入路径：

 // _tools.scss
//仅使用库一次，配置
@USE'ACCOUTREMT/SASS/工具'
  $ font-path：'../ fonts/'，
）；
//使用此部分转发配置的库
@forward'Accoutrement/Sass/Tools';

//在此处添加所有扩展名...


// _anywhere-else.scss
//导入已配置的包装和扩展的库
@USE'工具';

@USE和@forward必须在文档的根（未嵌套）和文件开始时声明。仅在导入命令之前出现@Charset和简单的变量定义。

移至模块

为了测试新的语法，我构建了一个新的开源SASS库（级联颜色系统）和一个为我的乐队的新网站 - 都仍在建设中。我想将模块理解为图书馆和网站作者。让我们从使用模块语法编写网站样式的“最终用户”体验开始。

维护和写作风格

在网站上使用模块很高兴。新的语法鼓励我已经使用的代码体系结构。我所有的全局配置和工具导入都在一个单一目录中（我称其为配置），并带有一个索引文件，可以转发我需要的所有内容：

 // config/_index.scss
@forward'tools';
@forward'Fonts';
@forward's scale';
@forward的“颜色”；

当我构建网站的其他方面时，我可以在需要的任何地方导入这些工具和配置：

 //布局/_banner.scss
@USE'../config';

.page-title {
  @include config.font-family（'header'）;
}

这甚至与我现有的Sass库（如Accoutrement和Herman）一起使用，这些库仍然使用旧的@Import语法。由于@Import规则将在一夜之间不会在任何地方替换，因此SASS已在过渡期内建立。现在可以使用模块，但是@Import将不再弃用一两年的弃用 - 此后仅将其从该语言中删除。同时，这两个系统将在任一方向上一起工作：

• 如果我们@Import一个包含新的 @use/ @forward语法的文件，则仅导入公共成员，而无需命名空间。
• 如果我们@USE或@forward一个包含Legacy @Import语法的文件，我们可以访问所有嵌套导入作为单个名称空间。

这意味着您可以立即开始使用新的模块语法，而无需等待您喜欢的库的新版本：我可以花一些时间来更新所有库！

迁移工具

如果我们使用詹妮弗·塔卡（Jennifer Thakar）构建的迁移工具，则升级不应需要很长时间。它可以与节点，巧克力或自制者一起安装：

 NPM安装-G SASS移民
巧克力安装萨斯移民
酿造安装SASS/SASS/迁移器

这不是用于迁移到模块的一次性工具。现在，Sass重新开始积极开发（见下文），迁移工具还将获得定期更新，以帮助迁移每个新功能。最好在全球安装它，并将其围绕以备将来使用。

迁移器可以从命令行运行，并希望将其添加到Codekit和Scout等第三方应用程序中。将其指向单个SASS文件，例如style.scss。并告诉它要应用的迁移。此时，只有一个迁移称为模块：

 ＃Sass Emigrator  <entrypoint.scss ...>
SASS迁移模块样式</entrypoint.scss>

默认情况下，迁移者只会更新一个文件，但是在大多数情况下，我们需要更新主文件及其所有依赖项：导入，转发或使用的任何部分。我们可以通过单独提及每个文件或添加 - 移民DEPS标志来做到这一点：

 Sass-Origrator-移民DEPS模块样式.scss

对于测试运行，我们可以添加-Dry-run -verbose（或简称-NV），并在不更改任何文件的情况下查看结果。我们还可以使用许多其他选项来自定义迁移，即使是专门用于帮助图书馆作者删除旧手动名称空间的选项，但我不会在这里介绍所有这些空间。迁移工具已在SASS网站上充分记录。

更新已发布的库

我在图书馆方面遇到了一些问题，专门试图使多个文件之间的用户配置可用，并围绕缺失的链式配置工作。订购错误可能很难进行调试，但结果值得付出努力，我认为我们很快就会看到一些其他补丁。我仍然必须在复杂的软件包上尝试迁移工具，并可能为图书馆作者撰写后续文章。

现在重要的是要知道的是，Sass在过渡时期涵盖了我们。导入和模块不仅可以一起工作，而且我们可以创建“仅导入”文件，为仍在@Import in in Importries的旧用户提供更好的体验。在大多数情况下，这将是主要软件包文件的替代版本，并且您将需要并排： .scss for Module用户，而 .import.scss for Legacy用户。每当用户调用@import 时，它将加载文件的.import版本：

 //加载_forms.scss
@use'表单';

//加载_forms.input.scss
@Import'forms';

这对于为非模块用户添加前缀特别有用：

 // _forms.import.scss
//在添加前缀时转发主模块
@forward“表单”为forms-*;

升级的杂种

您可能还记得，几年前，Sass冻结了一个功能，以获取各种实现（libsass，Node Sass，Dart Sass），并最终退休了原始的Ruby实施。冻结在去年结束，在Github上进行了几个新功能，积极的讨论和发展 - 但并不大。如果您错过了这些发行版，则可能会陷入SASS博客上：

• CSS进口和CSS兼容性（DART SASS V1.11）
• 内容参数和颜色功能（Dart Sass V1.15）

Dart Sass现在是规范实现，通常是第一个实施新功能的实现。如果您想要最新的，我建议您进行切换。您可以安装带有节点，巧克力或自制的Dart Sass。它也可以很好地与现有的Gulp-Sass构建步骤相同。

就像CSS一样（自CSS3以来），新版本不再有一个统一版本数。所有SASS实现都从相同的规范中运行，但是每个SASS实现都有独特的发布时间表和编号，并在Jina设计的美丽的新文档中反映了支持信息。

截至2019年10月1日， SASS模块可在Dart Sass 1.23.0中使用。

以上是引入SASS模块的详细内容。更多信息请关注PHP中文网其他相关文章！