Sass 模块系统中的本地化和配置

Question

我已经使用 Sass's new module system 一段时间了，大部分时间都弄明白了它是如何工作的。我无法弄清楚如何从旧系统转换到新系统的一个用例是如何生成几乎相同的样式表，只有微小的变化和配置更改 — 出于本地化的目的。

（CSS 不幸的是，自定义属性并不是真正的选择。这会使这种方式更容易！）

过去，我通过为每个区域设置一个入口文件来实现这一点，其中包含该区域设置的配置信息，这些文件可以被以下所有导入的文件获取，并根据需要进行任何特定于区域设置的操作到。例如：

en.scss

$locale: "en";
$rtl: false;
$font-family: "Gill Sans", sans-serif;

@import "shared/code";

ar.scss

$locale: "ar";
$rtl: true;
$font-family: sans-serif;

@import "shared/code";

处理后，我最终会得到一个 en.css 文件，其中只有英语需要的 CSS 和一个 ar.css 文件，只有阿拉伯语需要的 CSS , 一切都很好。

这在 Sass 模块系统中不再可能。因为模块系统的一个明确目标是删除全局变量并将事物更紧密地限定在单个文件中，所以 @import 已被弃用，取而代之的是 @use 和 @forward，它们都不允许“ children”访问“parent”文件的变量。

我的第一个想法是依靠模块系统并为每个语言环境创建一个可导入的配置文件。做这样的事情有效：

@use "locale/en" as locale;

html {
    font-family: locale.$font-family;
}

但是，现在我的语言环境参考被硬编码到每个需要它的文件中。 @use 只接受一个字符串（没有变量），所以我不能尝试巧妙地使用它，而且我不能在不先编辑几个文件的情况下为多个语言环境生成 CSS。失败。

我目前的 hack-y 解决方案是 @use "config"; 无处不在，将我的语言环境变量存储在一堆不同的配置文件中，然后在我需要编译时将语言环境文件的名称更改为“config”对于那个语言环境。这显然是不可持续的，并且容易出现大量人为错误，所以我想就是否有其他方法完全让我忽略，或者这个用例是否在不再有新的 Sass 模块系统。

提前致谢！

Answer 1

这就是with (...)configuration in the module syntax的目的。导入文件仍然能够在加载的模块中配置变量 - 这只是发生在更明确的语法中：

// en.scss
@use "shared/code" with (
  $locale: "en",
  $rtl: false,
  $font-family: ("Gill Sans", sans-serif),
);

和：

// ar.scss
@use "shared/code" with (
  $locale: "ar",
  $rtl: true,
  $font-family: sans-serif,
);

Sass 模块系统中的本地化和配置

Localisation and configuration in the Sass module system

css

architecture

localization

module

sass