¿Cómo puedo citar cadenas en SASS?

Question

Estoy usando SASS para generar una mezcla de @ font-face, 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 hacer que cite " Mi fuente " (con "! name ") o " truetype " (elimina las comillas). ¿Alguna idea sobre cómo puedo hacer esto?

Answer 1

Se puede mejorar un poco utilizando la interpolación de cadenas:

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

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

Answer 2

Puede citar sus variables, use comillas simples dentro de comillas dobles . Así es como lo hago:

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

Esto se compilará correctamente para:

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

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

Espero que haya ayudado!

Answer 3

Bien, encontré que tengo que hacer:

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

Maldición, esa es una sintaxis extraña ...

Answer 4

Utilizando http://www.fontsquirrel.com/fontface/generator Tengo una mezcla de Sass correspondiente:

=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\"");
}