SASSで文字列を引用するにはどうすればよいですか？

Question

SASSを使用して@ 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")

これになります：

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

いくら試しても、＆quot; My font＆quot;を引用することはできません。 （＆quot;！name＆quot;を使用）または＆quot; truetype＆quot; （引用符を削除します）。どのようにこれを行うことができますか？

Answer 1

文字列補間を使用すると、少し改善できます：

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

しかし、sassで引用符で囲まれた文字列を処理するには、より良いアプローチが必要であることに同意します。 Sassには、ここで何かインテリジェントなことを行うのに十分なコンテキストがあり、引用ロジックをユーザーにオフロードしません。

Answer 2

変数内で引用できます。二重引用符内で単一引用符を使用します。これは私がそれを行う方法です：

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

これは正しくコンパイルされます：

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

他の方法で引用符を付けることはできないと思います（つまり、単一引用符内の二重引用符）。これを行うと、コンパイルエラーが発生します。

助けてくれた！

Answer 3

さて、私はする必要があることがわかりました：

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

気の毒な構文です...

Answer 4

http://www.fontsquirrel.com/fontface/generator を使用する 対応する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

これは、物事を引用符で囲みます：

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