SASS字体面板mixin问题？

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)

但是它会返回一个错误："属性只允许在规则、指令、mixin包含或其他属性中使用。" 为什么？有什么问题？

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

- gespinha

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

- Martin Turjak

Answer 2

自然地，font-face 是列表中的一项。 我找到了 这个链接，并进行了微调以产生以下结果。它允许我声明文件名一次为 'MyFontName'，然后为以后使用创建一个有用的变量 '$custom-font-one'。我希望它能帮助其他人。

@mixin declare-font-face($font-face-family, $font-face-filename, $font-face-weight : normal, $font-face-style :normal) {
  @font-face {
    font-family: '#{$font-face-family}';
    src: url(('#{$font-face-filename}.eot'));
    src: url(('#{$font-face-filename}.eot?#iefix')) format('embedded-opentype'),
    url(('#{$font-face-filename}.woff')) format('woff'),
    url(('#{$font-face-filename}.ttf')) format('truetype'),
    url(('#{$font-face-filename}.svg##{$font-face-family}')) format('svg');
    font-weight: $font-face-weight;
    font-style: $font-face-style;
  }
}
$custom-font-one:'MyFontName';
@include declare-font-face('#{$custom-font-one}', '../includes/fonts/#{$custom-font-one}');

- Trent Turner