SassでコンパイルしたCSSのエラー

前提・実現したいこと

Sassを使用してwebページの制作をしています。
ご教授をお願いいたします。

発生している問題・エラーメッセージ

1回目のコンパイルでcssに文字化けのようなエラーが発生。
→何も変えず2~3回コンパイルするとエラーが消えるという挙動が発生しています。
@mixinでスタイルを使い回していますが、下記のコードよりも前に記述した箇所は問題なく表示できています。

該当のソースコード

Sass
1ソースコード
2@mixin default {
3  width: 100%;
4  height: auto;
5  margin: 0 auto;
6  max-width: 1280px;
7}
8
9@mixin h2 {
10    margin-bottom: 20px;
11    margin-top: 100px;
12    text-align: center;
13    font-size: 30px;
14    letter-spacing: 2px;
15    position: relative;
16}
17@mixin h2-before {
18      content: "";
19      background-repeat: no-repeat;
20      background-size: contain;
21      width: 190px;
22      height: 100px;
23      display: inline-block;
24      position: absolute;
25      top: -70px;
26      left: 43%;
27}
28
29
30.house{
31  @include default();
32  h2{
33    @include default();
34    @include h2();
35    &::before{
36      @include h2-before();
37      background-image: url(../img/svg/house-title.svg);
38    }
39  }
40}

css
1ソースコード
2.house h2 {
3  width: 100%;
4  height: auto;
5  margin: 0 auto;
6  max-width: 1280px;
7  margin-bottom: 20px;
8  margin-top: 100px;
9  text-align: center;
10  fon{
11  content: "";
12  background-repeat: no-repeat;
13  background-size: contain;
14  width: 190px;
15  height: 100px;
16  display: inline-block;
17  position: absolute;
18  top: -70px;
19  left: 43%;
20  background-image: url(../img/svg/house-title.svg);
21}