如何将一个 sass 文件中的 @mixin 包含到不同文件夹中的另一个 sass 文件中答案

【问题标题】：How to include @mixin from one sass file to another sass file in different folder如何将一个 sass 文件中的 @mixin 包含到不同文件夹中的另一个 sass 文件中
【发布时间】：2018-08-29 18:50:11
【问题描述】：

我将一个 SASS 文件中的 mixin 包含到另一个文件中，但使用 ionic serve 命令时出现错误：

Error: "Sass Error
Invalid CSS after " @include": expected identifier, was '"../../../theme/mai'"

这是我要导入 mixin 的文件：

action-sheet-layout-1 { 
    @include '../../../theme/main.scss' 
    @include "settingAnimationHeader"; // this mixin is defined in main.scss

    [button-action-shit] {
        z-index: 99999; right: 16px; top: 56px;
        ...
    }

main.scss中定义的mixin：

@mixin settingAnimationHeader { 
    @keyframes headerOff { 
        from { 
            background-color: theme-colors('mainColors', 'primary'); 
        } 
        to {
            background-color: transparent;
        } 
    }
...
}

我是 ionic 和 SASS 的新手，我做对了还是错过了什么？

src/theme/main.scss # the mixin is defined in this file.
src/components/action-sheet/layout-1/action-sheet-layout-1.scss # the mixin is imported here.

【问题讨论】：

标签： css sass ionic3

【解决方案1】：

2021 年更新

Sass 团队不鼓励继续使用 @import 规则。 Sass 将在未来几年逐步淘汰它，并最终将其从语言中完全删除。更喜欢@use 规则。

所以根据这里的情况，代码应该从

@import 'path/to/main.scss' //注意：确保你命名你的 sass 部分以下划线（_）开头，这样 sass 知道它不是要编译成 css 文件，你也不会需要包含此处所示的扩展名，而不是更改它

到

@use 'path/to/main' as m //其中 'm' 是您部分的引用变量或命名空间。顺便说一句，这是可选的，但建议使用。

您可以在这里找到更多信息：Sass-docs/imports

【讨论】：

@import vs @use in details

【解决方案2】：

如果 mixins 是在 main.scss 中定义的，请确保在使用它们的文件之前导入文件，即 action-sheet-layout-1.scss在这种情况下。

【讨论】：

【解决方案3】：

您可以将 main.scss 文件重命名为 _main.scss

前缀 '_' 告诉 sass/scss 编译器这个文件是一个partial。因此，编译器不会尝试编译该文件。

Sass partials

【讨论】：

【解决方案4】：

在您的 SASS 文件 (action-sheet-layout-1.scss) 的顶部，您需要包括：@import "../../../theme/main.scss" 然后您可以通过在要应用此 mixin 的 css 规则中执行 @include settingAnimationHeader; 来访问 main.scss 中的 mixins

【讨论】：