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)

但它返回错误：＆＃34;属性仅允许在规则，指令，mixin包含或其他属性中。＆＃34;

为什么呢？怎么了？

以下是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

Answer 2

当然，font-face在列表中。我找到了this link，我调整了它以产生以下内容。它允许我声明文件名一次＆＃39; MyFontName＆＃39;然后是一个有用的变量供以后使用＆＃39; $ custom-font-one＆＃39;。我希望它可以帮助其他人。

@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}');

SASS字体面临mixin问题？

2 个答案: