css - SASS 字体混合问题？

Question

我在处理我的 SASS 时遇到了一些问题。我有以下 SASS

$folder: 'fonts/'

@mixin font-face($family, $filename, $folder, $style, $weight)
  font-family: $family
    src: url('#{$folder}/#{$filename}.eot')
    src: url('#{$folder}/#{$filename}.eot?#iefix') format("embedded-opentype")
    src: url('#{$folder}/#{$filename}.woff') format("woff")
    src: url('#{$folder}/#{$filename}.ttf') format("truetype")
    src: url('#{$folder}/#{$filename}.svg#08bb4ba465a902745fc23c83a5d9fdc2') format("svg")
    font-style: $style
    font-weight: $weight

@include font-face('Abc', 'abc', $folder, normal, 700)

但它返回一个错误:“属性只允许在规则、指令、混合包含或其他属性中使用。”

为什么？怎么了？

这是 CodePen - http://codepen.io/anon/pen/vDJhn

Answer 1

您需要将属性包装在 @font-face 规则中……在 mixin 内部或包含它时。

例如。像这样:

@mixin font-face($family, $filename, $folder, $style, $weight)
  @font-face
    font-family: $family
    src: url('#{$folder}/#{$filename}.eot')
    src: url('#{$folder}/#{$filename}.eot?#iefix') format("embedded-opentype")
    src: url('#{$folder}/#{$filename}.woff') format("woff")
    src: url('#{$folder}/#{$filename}.ttf') format("truetype")
    src: url('#{$folder}/#{$filename}.svg#08bb4ba465a902745fc23c83a5d9fdc2') format("svg")
    font-style: $style
    font-weight: $weight