css - 从组件中导入变量，有什么好处？

Question

首先是一些背景。我们有一个主 sass 文件 main.scss，我们基本上只是在其中导入其他 scss 文件。

/* ==========================================================================
                                    Base
   ========================================================================== */

@import "base/colors";
@import "base/variables";
@import "base/typography";
@import "base/layout";
@import "base/font-icons";
@import "base/base";
@import "base/ie-fixes";

稍后我们也从 styles 文件夹外部导入组件，因为我们有一个类似于开发方法的组件，其中我们将组件与它的 .js .html .scss 文件“捆绑”在一个文件夹中。

现在是问题。假设我有这样一个组件，例如 /account。在 account.scss 中，如果我使用 @import 编写 account.scss 文件，我将使用来自 styles/base/variables 的变量../../styles/base/variables" 如果我在 variables.scss 中定义了其他规则，而不仅仅是真正的变量声明，那么我将复制 sass 输出的代码。好的，在 variables.scss 中我应该只有变量，但是在 colors.scss 中说我可能有变量声明和规则声明，例如

$grey: grey;
.grey { color: $grey; }

现在，如果我导入颜色，我的输出 sass 文件将包含 .grey { .. } 至少两次，因此它会被复制。好的，让我们拆分颜色并将规则移动到不同的文件中，只让变量声明。然后我可以自由导入文件而不会重复。

现在我的问题是为什么要导入？在文档之外将变量 decalarions 导入 account.scss 有什么好处吗？

我希望我说清楚了，我尽量说清楚了。

Answer 1

您已经回答了自己的问题:

Okay, let's split colors up and move rules into a different file and let variables declarations only. Then I can freely import the file without duplication.

我总是将 mixins 与 functions 与 variables 分开——最重要的是:将所有这些与正在生成的输出分开。通过这种方式，您可以在任何地方安全地导入模块或 SCSS 的单个部分。

例如:

/setup
    _variables.scss
    _functions.scss
    _mixins.scss
    ...
    _module.scss
/global
    _base.scss
    _layout.scss
    _typography.scss
    _helpers.scss
    ...
    _module.scss
/components
    _slideshow.scss
    _pagination.scss
    _widgets.scss
    ...
    _module.scss

main.scss

其中一个子文件夹中的每个 _module.scss 都像这样:

/* setup/_modules.scss */
@import 'variables';
@import 'functions';
@import 'mixins';

main.scss 看起来像这样:

/* main.scss */
@import 'setup/module';
@import 'global/module';
@import 'components/module';

你的问题是导入有什么好处:我不知道。你必须知道，因为只有你知道你的应用程序。例如，如果“独立”组件使用相同的颜色集，则导入一个 _colors.scss 确实是个好主意，让您保持干爽。