CODEWITHSUNDEEP
csssassscss-mixins
aberry
aberry

Reputation: 21

SASS @mixin compiling in .css file

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

Upvotes: 2

Views: 338

Answers (1)

Dominik
Dominik

Reputation: 6313

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"
}

Upvotes: 1

Related Questions