CSS 使用 SASS mixin 时编译错误

Question

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

谢谢！！

Answer 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>

CSS 使用 SASS mixin 时编译错误

CSS compiled wrongly when using a SASS mixin

html

css

sass

mixins

node-sass