CSS compiled wrongly when using a SASS mixin

Question

When i include a mixin for an html element, the html element comes out nested inside the mixin style in the compiled css.

The compiled CSS below throws error because the first property of @font-face is a '.myDiv'.
(not sure how it got inserted inside during compilation).

// INPUT SASS //

@mixin font-face($font-name, $font-path) {
  @font-face {
    font-family: $font-name;
    src: url('#{$font-path}');
  }
}

.myDiv {
  @include font-face('custom', 'assests/fonts/custom.woff');
  width: 100px;
}

// OUTPUT CSS //

   .myDiv {
      width: 100px;
    }

    @font-face {
      .myDiv {
        font-family: "custom";
        src: url("assests/fonts/custom.woff");
      }
    }

Thanks !!

Answer 1

font-face is not a property which you set to an element. You need to import it in your css file and the use the font-family property on the element.

see code below

@mixin font-face($font-name, $font-path) {
  @font-face {
    font-family: $font-name;
    src: url('#{$font-path}');
  }
}
@include font-face('custom', 'assests/fonts/custom.woff');
 
.myDiv {
  font-family: custom;
  width: 100px;
}

<div class="myDiv">
  assss
</div>