SASS字体混合问题？答案

【问题标题】：SASS font face mixin issue?SASS字体混合问题？
【发布时间】：2014-06-19 00:24:22
【问题描述】：

我在处理我的 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

【问题讨论】：

标签： css sass

【解决方案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

【讨论】：

【解决方案2】：

字体自然在列表中。我找到了this link，我对其进行了调整以生成以下内容。它允许我声明文件名一次“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}');

【讨论】：