SASS中@mixin定义@font-face编译为CSS时出现异常嵌套问题求助

• 核心错误为调用@font-face相关mixin的位置错误：@font-face是CSS顶层规则，作用是全局注册自定义字体，不允许嵌套在任意普通选择器（如body）内部。
• 你将包含@font-face定义的mixin放在body选择器中调用时，SASS编译会自动将外层的body选择器注入到@font-face内部，最终生成了非法的嵌套结构。

1. 将mixin的调用移到全局作用域即可，@font-face只需要全局注册一次，后续所有选择器都可以直接使用注册好的字体名：

@import "./abstracts/typography";

// 全局调用mixin注册两种字重，不需要放在选择器内
@include fontType("normal");
@include fontType("bold");

body {
    // 直接使用已经注册好的字体
    font-family: "gotham", sans-serif;
    background-color: $background-color;
    line-height: 1.6;  
}

2. （可选优化）如果你的项目不需要动态控制字体注册逻辑，也可以直接去掉mixin封装，直接在_typography.scss中全局写两个@font-face规则即可，更简洁直观。

内容的提问来源于stack exchange，提问作者aberry