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>

使用SASS mixin时CSS编译错误

1 个答案: