SASS @mixin compiling in .css file

Question

Trying to understand why SASS is compiling wrong in CSS:

in _typography.scss I have:

@mixin fontType ($type) {
    @if $type=="normal" {
        @font-face {
            font-family: "gotham";
            font-weight: normal;
            font-style: normal;
            src: url("./assets/fonts/HomepageBaukasten-Book1/BOOK/WEB/HomepageBaukasten-Book.woff2");
        }    
    } @else {
        @font-face {
            font-family: "gotham";
            font-weight: bold;
            font-style: normal;
            src: url("./assets/fonts/HomepageBaukasten-Bold11/BOLD/WEB/HomepageBaukasten-Bold.woff2");
        }    
    }
}

in main.scss:

@import "./abstracts/typography";

body {
    @include fontType("normal");
    background-color: $background-color;
    line-height: 1.6;  
}

and gets compiled in main.css file like so:

body {
  background-color: #17141f;
  line-height: 1.6;
}
@font-face {
  body {
    font-family: "gotham";
    font-weight: normal;
    font-style: normal;
    src: url("/HomepageBaukasten-Book.1c60130f.woff2");
  }
}

Any idea where the problem is? Am I going wrong somewhere? TY

Everything looks like I would expect it to look from the SASS you wrote. The CSS is invalid because there are no selectors in `@font-face` declarations. — Dominik, Aug 30 '21 at 22:21

Dominik · Answer 1 · 2021-08-31T01:49:31.197

Like I said in the comments, the mixin works but you're using it inside a selector breaks it. Also just adding a font declaration to a class does not give that class the font. You have to use font-family to reference the font declaration.

Use it like this:

@import "./abstracts/typography";

@include fontType("normal");

body {
    background-color: $background-color;
    line-height: 1.6;
    font-family: gotham;
    font-weight: normal;
}

Overall there is not need to create a mixin for font declarations as the browser will not download fonts that have been declared until they are actually used. So you can happily do the below and it should all just work without loading too many fonts:

@font-face {
    font-family: "gotham";
    font-weight: normal;
    font-style: normal;
    src: url("./assets/fonts/HomepageBaukasten-Book1/BOOK/WEB/HomepageBaukasten-Book.woff2");
}
@font-face {
    font-family: "gotham";
    font-weight: bold;
    font-style: normal;
    src: url("./assets/fonts/HomepageBaukasten-Bold11/BOLD/WEB/HomepageBaukasten-Bold.woff2");
}

body {
    background-color: $background-color;
    line-height: 1.6;
    font-family: gotham;
    font-weight: normal; // this will use the "HomepageBaukasten-Book.woff2"
}

.some_other_selector {
    font-family: gotham;
    font-weight: bold; // this will use the "HomepageBaukasten-Bold.woff2"
}

SASS @mixin compiling in .css file

1 Answers1