Sass/Bourbon .css 输出与 @font-face mixin 有错误答案

【问题标题】：Sass/Bourbon .css output has errors with @font-face mixinSass/Bourbon .css 输出与 @font-face mixin 有错误
【发布时间】：2014-06-25 01:55:22
【问题描述】：

我使用的是默认的 Sass/Bourbon mixin font-face.scss，但生成的 css 是错误的，出于某种原因，在 @font-face 下嵌套了 body 标签。生成 CSS 时我没有错误，但字体当然没有显示。

有什么想法吗？

CSS 输出：

@font-face {
    body {
        font-family: AgencyFB Regular;
        font-weight: normal;
        font-style: normal;
        src: url("../../fonts/agency/agencyfb_regular.eot");
        src: url("../../fonts/agency/agencyfb_regular.eot?#iefix") format("embedded-opentype"), 
         url("../../fonts/agency/agencyfb_regular.woff") format("woff"), 
         url("../../fonts/agency/agencyfb_regular.ttf") format("truetype"), 
         url("../../fonts/agency/agencyfb_regular.svg#AgencyFB Regular") format("svg"); 
    } 
}

SCSS：

body {
@include font-face(AgencyFB Regular, "fonts/agency/agencyfb_regular");  
font: $body-font-size;
line-height: $body-line-height;
}

【问题讨论】：

不确定您的期望，但@font-face { body {} } 与body { @font-face {} } 一样无效。
那你还能把@include font-face放在哪里呢？输出的 css 应该有一个单独的 @font-face 部分和一个包含 font-family:AgencyFB Regular 的 body 部分，但它是嵌套的。
你试过检查相关链接吗？ --------------->（提示：stackoverflow.com/questions/20254869/bourbons-font-face-mixin）

标签： sass mixins bourbon

【解决方案1】：

Cimmanon 的链接为我指明了正确的修复方向。谢谢！

基本上我将@include font-face(AgencyFB Regular, "fonts/agency/agencyfb_regular"); 移到任何css 标记之外（即：body）。

然后在body 标记中包含font-family: AgencyFB Regular。

像这样：

@include font-face(AgencyFB Regular, "fonts/agency/agencyfb_regular");

body {
    font-family: AgencyFB Regular;      
    font: $body-font-size;
    line-height: $body-line-height;
}

【讨论】：