Comment puis-je citer des chaînes dans SASS?

Question

J'utilise SASS pour générer un mixin @ font-face, cependant:

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

devient ceci:

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

Quel que soit le nombre d'essais que j'ai effectués, je ne peux pas l'avoir non plus avec la mention "Ma police". (avec "! name") ou "TrueType" (ça enlève les guillemets). Des idées sur la façon dont je peux faire cela?

Answer 1

Cela peut être amélioré avec l’interpolation de chaînes:

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

Mais je conviens que nous avons besoin d’une meilleure approche pour traiter les chaînes entre guillemets dans sass. Sass a assez de contexte pour faire quelque chose d'intelligent ici et ne pas décharger la logique de cotation sur l'utilisateur.

Answer 2

Vous pouvez citer dans vos variables, utilisez guillemets simples à l'intérieur de guillemets doubles . Voici comment je le fais:

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

Ceci compilera correctement pour:

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

Je pense que vous ne pouvez pas citer l'inverse (c.-à-d. des guillemets doubles à l'intérieur de guillemets simples). Cela vous donnera des erreurs de compilation.

J'espère que ça a aidé!

Answer 3

D'accord, j'ai constaté que je devais faire:

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

Bon sang, c'est une syntaxe maladroite ...

Answer 4

Utilisation de http://www.fontsquirrel.com/fontface/generator J'ai un mix correspondant à 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

Ceci met des citations autour de choses:

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