SASS mixin 和变量可以放在不同的文件中吗？答案

【问题标题】：Can SASS mixins and variables sit in different files?SASS mixin 和变量可以放在不同的文件中吗？
【发布时间】：2015-11-15 07:50:54
【问题描述】：

您好，我正在尝试使用 GULP 在项目中将我的 sass 文件组织成单独的块。但是，当我在单独的文件中导入我的 mixins 和变量时：

文件：variables.scss

//first import variables that might be used throughout all the other files
@import "common/_variables.scss";

文件：mixins.scss

Mixins
@import "common/_mixins.scss";

然后尝试从其他文件中访问这些 mixin，例如

文件：buttons.scss @import "common/_buttons.scss";

运行 gulp sass 时出现以下错误：

throw er; // Unhandled 'error' event
no mixin named 'foo'

or 

undefined variable 'foo'

尽管在 variable.scss 和 mixins.scss 文件中定义了 mixins/variable。所以 gulp 中途中断了任务并且没有创建样式表。

在 SASS 中是否有一条规则意味着变量和 mixin 必须全部导入到使用它们的相同文件中？如果是这种情况，那就是个问题了，因为我有很多文件我想分开，而不必继续在其中导入 mixins 和变量。

【问题讨论】：

可能重复：stackoverflow.com/questions/17976140/…

标签： sass gulp mixins

【解决方案1】：

简短的回答是您不必须将它们导入到每个可能包含它们的文件中。但是，确实需要在某个地方建立关系，而如何做到这一点取决于您是要构建一个最终的 CSS 文件 - 还是一系列单独的文件。

如果您想要前者，您可以考虑使用一个主导入文件，该文件仅用于导入所有适当的 *.scss 文件，并将其作为您的 gulp 构建脚本要编译的主要 SASS 文件。

您需要注意以正确的顺序导入文件 - 因此，在定义 mixin 的文件被导入之前，不要导入使用 mixin 的文件。

例如 - 我个人使用的 main.scss 文件的结构为

@import "common/_variables.scss";
@import "common/_mixins.scss";


// Now import the files that might use these vars/mixins
@import "common/_buttons.scss";

通过 gulp 构建以创建 css/main.css。

如果您想要一系列 CSS 文件 - 即 button.css、type.css、layout.css 等 - 那么您需要在每个调用它们的文件中包含适当的变量和 mixin @import 声明

【讨论】：

您好，谢谢您的回答。是的，我想通了。遗憾的是，如果为所有文件单独导入变量，则变量不可见。我想我将不得不坚持一个文件，然后只有在我完成调试后才缩小。干杯
值得记住的是，变量不会直接导入到编译后的 CSS 中，除非您明确调用它们。因此，在多个其他文件中包含指向您的 varialbes .scss 文件的链接不会影响最终编译源的大小。
嘿，谢谢，这是否意味着我可以在每个单独的 sass 文件中导入 variables.scss 文档而不影响编译的源代码？
您不需要将 mixins 或变量文件“交叉导入”到其他 .scss 文件中。只需确保在任何其他样式表之前将 _variable.scss 和 _mixins.scss 文件导入 main.scss 文件即可。

【解决方案2】：

我找到了使用 GULP 预先连接 SASS 文件的最佳解决方案。

就像这个 STYLUS 的例子一样

gulp.src(config.projects.css.source)
    .pipe(sourcemaps.init())
    .pipe(mktimecss(__dirname+'/web'))
    .pipe(concat('styles'))
    .pipe(stylus({
        'include css': true,
        use: [nib()],
        // compress: true,
        linenos: false
    }))
    ...... and so on .......

【讨论】：

【解决方案3】：

绝对有可能将你的 mixin 和变量放在不同的文件中。事实上，我会推荐您发现自己重用的任何 mixins/变量，您应该对它们采取更全局的方法，而不是将它们导入到单个文件中。

我见过的组织 Sass 文件目录的最佳方法之一是 The 7-1 Pattern，它使整个样式结构更易于理解和构建。

此组织策略中最适用于您的问题的部分是创建一个 main.scss 文件，该文件会导入您计划使用的每个文件。不过，请确保您注意导入的顺序。您不能从之后导入的文件中导入使用 mixins 或变量的文件。

【讨论】：