SASSと@ font-face

Question

私は以下のCSSを持っています - 私はSASSでどのように記述しますか？私はcss2sassでそれを逆コンパイルしようとしたが、ちょうどエラーが発生し続けて....それは私のCSS（;-)動作しますか？

@font-face { 
    font-family: 'bingo'; 
    src: url("bingo.eot"); 
    src: local('bingo'), 
     url("bingo.svg#bingo") format('svg'), 
     url("bingo.otf") format('opentype'); 
} 

Answer 1

誰もが思っていた場合 - それはおそらく私のcssだった...

@font-face 
    font-family: "bingo" 
    src: url('bingo.eot') 
    src: local('bingo') 
    src: url('bingo.svg#bingo') format('svg') 
    src: url('bingo.otf') format('opentype') 

は十分に近いように思わ

@font-face { 
    font-family: "bingo"; 
    src: url('bingo.eot'); 
    src: local('bingo'); 
    src: url('bingo.svg#bingo') format('svg'); 
    src: url('bingo.otf') format('opentype'); } 

としてレンダリングされます...ちょうどに必要SVGのレンダリングを確認してください

Answer 2

私はしばらくの間これを苦労してきました。 Dyceyの解決策は、srcを複数回指定すると、CSSファイルに同じことが出力されるという点で正しいです。しかし、これはOSX Firefox 23で破損しているようです（おそらく他のバージョンもありますが、テストする時間はありません）。 Font Squirrelから

クロスブラウザ@font-faceソリューションは、次のようになります。カンマ区切り値でsrcプロパティを生成するには

@font-face { 
    font-family: 'fontname'; 
    src: url('fontname.eot'); 
    src: url('fontname.eot?#iefix') format('embedded-opentype'), 
     url('fontname.woff') format('woff'), 
     url('fontname.ttf') format('truetype'), 
     url('fontname.svg#fontname') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

、あなたはライン - 以来、1本のライン上のすべての値を記述する必要がありますSassではブレークはサポートされていません。上記の宣言を生成するには、次のサスを記述します。

@font-face 
    font-family: 'fontname' 
    src: url('fontname.eot') 
    src: url('fontname.eot?#iefix') format('embedded-opentype'), url('fontname.woff') format('woff'), url('fontname.ttf') format('truetype'), url('fontname.svg#fontname') format('svg') 
    font-weight: normal 
    font-style: normal 

私は倍の束をパスを書くために愚かなようだと思うし、私は私のコードでは、過度に長い行を好きではないので、私

=font-face($family, $path, $svg, $weight: normal, $style: normal) 
    @font-face 
    font-family: $family 
    src: url('#{$path}.eot') 
    src: url('#{$path}.eot?#iefix') format('embedded-opentype'), url('#{$path}.woff') format('woff'), url('#{$path}.ttf') format('truetype'), url('#{$path}.svg##{$svg}') format('svg') 
    font-weight: $weight 
    font-style: $style 

使用：このミックスインを書き込むことによって、その周りに働い

+font-face('frutigerlight', '../fonts/frutilig-webfont', 'frutigerlight')