¿Cómo puedo citar cadenas en SASS?

Question

estoy usando SASS para generar una fuente cara mixin @, sin embargo esto:

=remotefont(!name, !url) 
    @font-face 
    font-family = !name 
    src = url(!url + ".eot") 
    src = local(!name), url(!url + ".ttf") format("truetype") 

+remotefont("My font", "/myfont.ttf") 

se convierte en esto:

@font-face { 
    font-family: My font; 
    src: url(/myfont.ttf.eot); 
    src: local(My font), url(/myfont.ttf.ttf) format(truetype); } 

No importa cuánto lo intente, no puedo tenerlo cotización ya sea "Mi fuente" (con "! nombre") o "tipo verdadero" (quita las comillas). ¿Alguna idea sobre cómo puedo hacer esto?

Answer 1

Se puede hacer un poco mejor el uso de la interpolación de cadenas:

!name = "asdf" 
.foo 
    font-family = "\"#{!name}\"" 

Pero estoy de acuerdo en que necesitamos un mejor enfoque para tratar las cadenas entre comillas en sass. Sass tiene contexto suficiente para hacer algo inteligente aquí y no descargar la lógica de cotización para el usuario.

Answer 2

Está bien, he encontrado que tengo que hacer:

"\"" + !name + "\"" 

Maldición que es una sintaxis torpe ...

Answer 3

que usted puede citar en sus variables, utilice comillas simples dentro comillas dobles. Así es como lo hago:

!string = "'Myriad Pro', 'Lucida Sans', Helvetica, Arial, sans-serif" 
.foo 
    :font-family= !string 

Esto compilará correctamente a:

.foo{ 
    font-family: 'Myriad Pro', 'Lucida Sans', Helvetica, Arial, sans-serif; } 

Creo que no se puede citar al revés (es decir, dentro de las comillas dobles comillas simples). Hacer eso te dará errores de compilación.

Espero que haya ayudado!

Answer 4

Usando http://www.fontsquirrel.com/fontface/generator Tengo un correspondiente mixin Sass:

=addfont(!name, !url, !family = 0) 
    @if !family == 0 
    !family = !name 
    @font-face 
    font-family = "'#{!name}'" 
    src = url(!url + ".eot") 
    src = local("'#{!name}'"), local("'#{!family}'"), url(!url + ".woff") format("'woff'"), url(!url + ".ttf") format("'truetype'"), url(!url + ".svg#" + !name) format("'svg'") 

Answer 5

Esto pone comillas alrededor de las cosas:

@font-face { 
    src: url("\"#{$ngx-font-path}/ngx-icon.eot\""); 
}