SCSS Mixin 无法编译答案

【问题标题】：SCSS Mixin not compilingSCSS Mixin 无法编译
【发布时间】：2020-08-22 02:27:17
【问题描述】：

我正在尝试使用 mixins 创建可重用的代码，但它似乎无法编译。我在其文件夹中将 mixin 命名为 deadCenter，但是当我使用 @include deadCenter 使用 mixin 时；它会说没有名为 deadCenter 的 mixin。我上传了文件夹的图片以供澄清。

main.scss 包含所有这些导入

@import "base/base";
@import "base/typography";
@import "base/colors";

@import "pages/home";

@import "variables/functions";
@import "variables/mixins";

混合文件

 @mixin deadCenter {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
 }

我要添加 mixin 的主文件

 .section-breakfast {
width:100vw;
height: 100vh;
background-image: linear-gradient(
    to right, 
    rgba($color-white-1, 0.801),
    rgba($color-grey-dark, 0.801)), 
    url(../img/breakfast-1.jpg);
background-size: cover;
position: relative;

&-text-box {
    @include deadCenter;
}
}

索引html

  <body>
  <main class="main">
    <section class="section-breakfast">
        <div class="section-breakfast-text-box">
            <h1 class="heading-primary">
                Breakfast
            </h1>
        </div>
    </section>
  </main>
  </body>

【问题讨论】：

当某些东西无法编译时，SASS 会抛出一个错误信息。生成的 CSS 是什么？
* { 边距：0;填充：0； } body { font-family: "Lato", sans-serif;字体粗细：400；字体大小：16px； } .heading-primary { 字体大小：4rem; } .section-breakfast { 宽度：100vw;高度：100vh；背景图像：线性渐变（向右，rgba（250、250、250、0.801）、rgba（57、62、70、0.801）），url（../img/breakfast-1.jpg）；背景尺寸：封面；位置：相对； } /*# sourceMappingURL=main.css.map */

标签： html css sass

【解决方案1】：

你很可能对文件的导入顺序有问题

@import "base/base";
@import "base/typography";
@import "base/colors";

@import "variables/functions";
@import "variables/mixins";

// import rules here
@import "pages/home";

【讨论】：