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文件＆＃34;捆绑＆＃34 ;在一个文件夹中。

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

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

现在，如果我导入颜色，我的输出sass文件将包含.grey {..}至少两次，因此它是重复的。好的，让我们将颜色分开并将规则移动到另一个文件中，并仅允许变量声明。然后我可以自由导入文件而无需重复。

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

我希望我很清楚，我尽可能地保持清醒。

Answer 1

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

好的，让我们分开颜色并将规则移到另一个文件中只允许变量声明。然后我可以自由导入该文件没有重复。

我总是将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确实是一个好主意并让您保持干燥。

从组件导入变量，有益吗？

1 个答案: