Como posso citar cordas em SASS?

Question

Eu estou usando SASS para gerar um @ font-face mixin, no entanto isto:

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

torna-se o seguinte:

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

Não importa o quanto eu tente, eu não posso tê-lo citar qualquer "Minha fonte" (com "nome!") Ou "TrueType" (que remove as aspas). Alguma idéia de como posso fazer isso?

Answer 1

Pode ser feito um pouco melhor usando interpolação string:

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

Mas eu concordo que precisamos de uma melhor abordagem para lidar com cordas cotados em sass. Sass tem contexto suficiente para fazer algo inteligente aqui e não descarregar a lógica citando para o usuário.

Answer 2

Você pode citar em suas variáveis, use aspas simples dentro aspas . Isto é como eu fazê-lo:

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

Este irá compilar corretamente para:

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

Eu acho que você não pode citar o contrário (isto é, aspas duplas dentro de aspas simples). Fazendo isso lhe dará erros de compilação.

Hope que ajudou!

Answer 3

Ok, eu descobri que eu preciso fazer:

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

Droga que é alguma sintaxe estranha ...

Answer 4

Usando http://www.fontsquirrel.com/fontface/generator Eu tenho um mixin Sass correspondente:

=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

Isso coloca aspas em torno de coisas:

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