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

Question

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

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

Peu importe à quel point j'essaie, je ne peux pas l'avoir citation soit "Ma police" (avec "! nom") ou "truetype" (il supprime les guillemets). Des idées sur comment je peux faire ça?

Answer 1

Il peut être un peu mieux l'interpolation de chaîne à l'aide:

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

Mais je suis d'accord sur le fait 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 devis à l'utilisateur.

Answer 2

D'accord, je trouve que je dois faire:

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

Bon sang qui est une syntaxe maladroite ...

Answer 3

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

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

Cela va compiler correctement:

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

Je pense que vous ne pouvez pas citer l'inverse (à savoir des guillemets doubles à l'intérieur des guillemets simples). Faire cela vous donnera des erreurs de compilation.

Espérons que cela a aidé!

Answer 4

En utilisant http://www.fontsquirrel.com/fontface/generator J'ai un Sass correspondant mixin:

=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

Cela met entre guillemets choses:

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