使用 SASS mixin 时 CSS 编译错误答案

【问题标题】：CSS compiled wrongly when using a SASS mixin使用 SASS mixin 时 CSS 编译错误
【发布时间】：2019-04-29 03:42:29
【问题描述】：

当我为 html 元素包含 mixin 时，html 元素会嵌套在编译后的 css 中的 mixin 样式中。

下面编译的 CSS 会抛出错误，因为 @font-face 的第一个属性是“.myDiv”。
（不确定它是如何在编译期间插入其中的）。

// 输入 SASS //

@mixin font-face($font-name, $font-path) {
  @font-face {
    font-family: $font-name;
    src: url('#{$font-path}');
  }
}

.myDiv {
  @include font-face('custom', 'assests/fonts/custom.woff');
  width: 100px;
}

// 输出 CSS //

   .myDiv {
      width: 100px;
    }

    @font-face {
      .myDiv {
        font-family: "custom";
        src: url("assests/fonts/custom.woff");
      }
    }

谢谢！！

【问题讨论】：

这是单人的。我会改变它。结果还是一样。
为什么要在类中声明字体？您是否尝试将其范围限定为仅适用于该类？我问是因为您通常在 css 开头的某个地方声明它们，然后稍后设置 font-family 以使用该字体
@Dirk 是的，我想要特定 html 类的特定字体系列，因为我有多个使用不同字体的元素（一些来自网络，一些来自本地）。所以，我想创建一个接受 url 和字体系列名称的通用 mixin 规则。
你正在混合它是如何工作的，你必须定义@font-face并使用定义为font-family就像这里developer.mozilla.org/en-US/docs/Web/CSS/@font-face#Examples
@Dirk 是的，但是这样我必须为每个 html 元素编写 @font-face { } 规则，其中至少有 2 个嵌套属性，这是很多重复的代码。您认为还有其他方法可以获得更 DRY 的解决方案？

标签： html css sass mixins node-sass

【解决方案1】：

font-face 不是您为元素设置的属性。您需要将其导入您的 css 文件并在元素上使用 font-family 属性。

见下面的代码

@mixin font-face($font-name, $font-path) {
  @font-face {
    font-family: $font-name;
    src: url('#{$font-path}');
  }
}
@include font-face('custom', 'assests/fonts/custom.woff');
 
.myDiv {
  font-family: custom;
  width: 100px;
}

<div class="myDiv">
  assss
</div>

【讨论】：

@Minhai T 我想这是唯一的方法（即不使用标准的'@font-face'规则）。在这个 codepen (codepen.io/davidpollet/pen/ORyYap) 中，我看到你可以包含它，所以我尝试了这种方式。可能不会。谢谢
实际上我需要@font-face，因为没有它，字体无法加载，因为'src'现在被设置为html元素的样式而不是获取它。
哇，这行得通。字体已正确加载和应用。因此，诀窍是将 mixin 名称声明为全局 font-face 变量，并在所需的 html 元素中展开它（不确定我是否表达正确）。
很高兴我能帮上忙！干杯！ :D