Wie kann ich zitiere Strings in SASS?

Question

Ich SASS bin mit einem @ font-face mixin zu erzeugen, aber dies:

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

wird folgendermaßen aus:

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

Egal, wie viel ich versuche, kann ich es auch nicht „My font“ (mit „! Namen“) oder „Truetype“ (es entfernt die Anführungszeichen) zitieren. Alle Ideen, wie kann ich dies tun?

Answer 1

Es kann ein wenig besser mit String-Interpolation vorgenommen werden:

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

Aber ich stimme zu, dass wir einen besseren Ansatz für den Umgang mit Strings in Anführungszeichen in sass müssen. Sass hat genug Kontext etwas Intelligentes hier und nicht abladen die zitierte Logik für den Benutzer zu tun.

Answer 2

Sie können in Ihren Variablen zitieren, verwenden Sie Apostrophe innerhalb von doppelten Anführungszeichen . Dies ist, wie ich es tun:

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

Dies kompiliert korrekt:

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

Ich denke, man kann nicht anders zitieren Runde (das heißt doppelte Anführungszeichen in einfache Anführungszeichen). das zu tun geben Ihnen Fehler kompilieren.

Ich hoffe, das! Half

Answer 3

Okay, fand ich, dass ich tun muss:

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

Verdammt

Das ist etwas umständlich Syntax ...

Answer 4

Mit http://www.fontsquirrel.com/fontface/generator Ich habe einen entsprechenden Sass 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

Dies setzt Anführungszeichen um Dinge:

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