2009-09-09 11 views
5

私はしかしこれ、する@ font-faceのミックスインを生成するために、SASSを使用しています:SASSの文字列をどのように引用できますか?

=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"(引用符は削除されます)のいずれかです。どのように私はこれを行うことができます上の任意のアイデア?

答えて

6

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

しかし、私は、私たちが草で引用符で囲まれた文字列を扱うためのより良いアプローチが必要であることに同意します。 Sassにはここでインテリジェントなやり方をするための十分なコンテキストがあり、ユーザーにクォートロジックをオフロードしないでください。

2

さて、私は私がする必要があることがわかった:いくつかの厄介な構文です

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

くそを...

それは少し良く使用して、文字列の補間を行うことができ
5

あなたの変数では、一重引用符を使用して二重引用符を引用することができます。これは私がそれを行う方法です。

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

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

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

私はあなたが他の方法ラウンド(単一引用符の内側、すなわち二重引用符)を引用しないことができると思います。そうすることでコンパイルエラーが発生します。

使用

1

http://www.fontsquirrel.com/fontface/generator 私は、対応するサスのミックスインがあります。

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

これは、物事の前後に引用符を置くを:

@font-face { 
    src: url("\"#{$ngx-font-path}/ngx-icon.eot\""); 
} 
関連する問題