SASS混合和变量可以放在不同的文件中吗？

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

文件：variables.scss

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

Mixins
@import "common/_mixins.scss";

文件：mixins.scss

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

Mixins
@import "common/_mixins.scss";

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

文件：buttons.scss @导入“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和变量。

简单的回答是，您不必将它们导入到可能包含它们的每个文件中。然而，在某个地方确实需要有一种关系，如何做到这一点取决于您是否希望构建一个最终的CSS文件，或者一系列单独的文件

如果你想要前者，你可以考虑拥有一个主导入文件，它不只是导入所有合适的*.SCSS文件，而且这是你的GULP编译脚本要编译的主要SASS文件。 您需要注意以正确的顺序导入文件-因此，在定义mixin的文件导入之前，不要导入使用mixin的文件

例如，我个人使用的main.scss文件的结构如下

@import“common/_variables.scss”；
@导入“common/_mixins.scss”；
//现在导入可能使用这些vars/mixin的文件
@导入“common/_buttons.scss”很有可能在不同的文件中包含混音和变量。事实上，我建议您重用任何mixin/变量，您应该对它们采取更全局的方法，而不是将它们导入到单个文件中

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

此组织策略中最适用于您的问题的部分是创建一个
main.scss
文件，该文件导入您计划使用的每个文件。不过，要确保你对进口订单很谨慎。您不能从之后导入的文件中导入使用mixin或变量的文件。
我找到了使用GULP预浓缩SASS文件的最佳解决方案

就像这个例子中的触控笔一样

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 .......

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