html - Sass mixin @content 不允许网格正常工作

Question

我遇到了一个奇怪的问题，我不熟悉使用@mixinand@content标签和一般的 sass，但由于某种原因，我grid-template-areas不能准确地代表我想要他们做什么。

HTML

<header>
 <div class="text"></div>
 <nav>
   <div class="about"></div>
   <div class="qualities"></div>
   <div class="portfolio"></div>
   <div class="contact"></div>
 </nav>
</header>

SCSS

$colors: (
    red: red,
    blue: blue
);

@function border($color) {
  @return 3px map-get($colors, $color) solid;
}

@mixin desktop {
  @media only screen and (min-width: 768px) {
    @content;
  }
}

header {
    grid-area: header;
    border: border(red);

    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-areas: "header-title nav";

    .text {
      grid-area: header-title;
      border: 3px green solid;
    }

    nav {
      grid-area: nav;
      border: border(blue);
    }

    @include desktop {
      grid-template-columns: 4fr 1fr 1fr 1fr 1fr;
      grid-template-rows: 1fr;
      grid-template-areas: "header-title header-about header-q header-port header-contact";

      .about {
        grid-area: header-about;
        border: border(blue);
      }

      .qualities {
        grid-area: header-q;
        border: border(blue);
      }

      .portfolio {
        grid-area: header-port;
        border: border(blue);
      }

      .contact {
        grid-area: header-contact;
        border: border(blue);
      }

    }

  }

看到这个问题...... jsfiddle

它应该从将标题分成 2 列到将标题分成 5 列；