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

Question

嗨,我正在尝试使用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";

然后尝试从其他文件访问这些mixins,例如

文件: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和变量.

Answer 1

简短的回答是,你不必须将它们导入到everyfile可能包括他们.然而,确实需要在某处建立关系,以及如何执行此操作取决于您是否要构建一个单个最终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文件 - 例如buttons.css,type.css,layout.css等 - 那么你需要在每个调用它们的文件中都有相应的变量和mixin @import声明