SASS y @ font-face

Question

Tengo el siguiente CSS: ¿cómo lo describiría en SASS? Intenté compilarlo de forma inversa con css2sass, y seguí recibiendo errores ... ¿es mi CSS (que funciona ;-))?

@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

En caso de que alguien se preguntaba - que era probablemente mi 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') 

rendirá como

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

que parece estar lo suficientemente cerca ... sólo hay que compruebe la representación SVG

Answer 2

He estado luchando con esto desde hace un tiempo. La solución de Dycey es correcta, ya que al especificar src varias veces se obtiene el mismo resultado en el archivo css. Sin embargo, esto parece romperse en OSX Firefox 23 (probablemente también en otras versiones, pero no tengo tiempo para probar).

El @font-face solución multi-navegador de Font Squirrel se parece a esto:

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

para producir la propiedad src con los valores separados por comas, tiene que escribir todos los valores en una sola línea, ya que línea- los descansos no son compatibles con Sass. Para producir la declaración anterior, debería escribir lo siguiente 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 

Creo que parece tonto para escribir la ruta de un montón de veces, y no me gustaría líneas excesivamente largas en mi código, por lo que trabajé alrededor de ella escribiendo este mixin:

=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 

uso: por ejemplo, puedo usar el mixin anterior para configurar la fuente de luz Frutiger así:

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