SASS @mixin 在 .css 文件中编译答案

【问题标题】：SASS @mixin compiling in .css fileSASS @mixin 在 .css 文件中编译
【发布时间】：2021-10-29 13:41:27
【问题描述】：

试图理解为什么 SASS 在 CSS 中编译错误：

在 _typography.scss 我有：

@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");
        }    
    }
}

在 main.scss 中：

@import "./abstracts/typography";

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

并像这样在 main.css 文件中编译：

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

知道问题出在哪里吗？我在某个地方出错了吗？ TY

【问题讨论】：

一切看起来都像我希望它从您编写的 SASS 中看到的那样。 CSS 无效，因为 @font-face 声明中没有选择器。

标签： css sass scss-mixins

【解决方案1】：

就像我在 cmets 中所说的那样，mixin 可以工作，但是您在选择器中使用它会破坏它。此外，仅向类添加字体声明不会为该类提供字体。您必须使用font-family 来引用字体声明。

像这样使用它：

@import "./abstracts/typography";

@include fontType("normal");

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

总体而言，不需要为字体声明创建 mixin，因为浏览器在实际使用之前不会下载已声明的字体。因此，您可以愉快地执行以下操作，并且无需加载太多字体就可以正常工作：

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

【讨论】：