Come posso citare le stringhe in SASS?

Question

Sto usando SASS per generare un mixin @ font-face, tuttavia questo:

=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")

diventa questo:

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

Non importa quanto ci provi, non posso farlo citare " Il mio carattere " (con "! nome ") o " TrueType " (rimuove le virgolette). Qualche idea su come posso farlo?

Answer 1

Può essere migliorato un po 'usando l'interpolazione di stringhe:

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

Ma sono d'accordo che abbiamo bisogno di un approccio migliore per gestire le stringhe tra virgolette in sass. Sass ha abbastanza contesto per fare qualcosa di intelligente qui e non scaricare la logica di quotazione per l'utente.

Answer 2

Puoi citare le tue variabili, usare virgolette singole all'interno di virgolette doppie . Ecco come lo faccio:

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

Questo verrà compilato correttamente in:

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

Penso che non puoi citare il contrario (ovvero virgolette doppie tra virgolette singole). Questo ti darà errori di compilazione.

Spero che abbia aiutato!

Answer 3

Okay, ho scoperto che devo fare:

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

Accidenti è una sintassi imbarazzante ...

Answer 4

Utilizzo di http://www.fontsquirrel.com/fontface/generator Ho un mixin Sass corrispondente:

=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

Questo mette le virgolette intorno alle cose:

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