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

Question

私はSASSを使用して@font-faceミックスインを生成していますが、これは次のとおりです。

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

どれだけ試しても、「My font」（「！name」を含む）または「truetype」（引用符を削除する）のいずれかを引用符で囲むことはできません。これをどのように行うことができるかについてのアイデアはありますか？

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\"");
}

Answer 6

文字列関数quoteを使用できます：

font-family: quote(!name)