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＆＃34; common / _buttons.scss＆＃34 ;;

运行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

简短的回答是不必须将它们导入到可能包含它们的每个文件中。但是，确实需要在某处建立关系，以及如何执行此操作取决于您是否要构建一个单个最终CSS文件 - 或一系列单个文件。

如果你想要前者，你可以考虑使用一个主导入文件，只需导入所有相应的* .scss文件，并将它作为你的gulp构建脚本看起来要编译的主要SASS文件。

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

所以例如 - 我个人使用的是一个结构为

的main.scss文件

＆＃13;

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

＆＃13;

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

如果你想要一系列CSS文件 - 例如buttons.css，type.css，layout.css等 - 那么你需要在每个调用它们的文件中使用相应的变量和mixin @import声明

Answer 2

绝对可以将mixins和变量放在不同的文件中。事实上，我建议您发现自己重用的任何mixins /变量，您应该采用更全面的方法，而不是将它们导入到单个文件中。

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

此问题的组织策略中最适用的部分是创建一个main.scss文件，用于导入您计划使用的每个文件。但是，请确保您对导入的订单保持谨慎。您无法从导入后的文件中导入使用mixins或变量的文件。

Answer 3

我找到了最好的解决方案，使用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 .......

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

3 个答案: