How can I quote strings in SASS?
Question
I'm using SASS to generate a @font-face mixin, however this:
=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")
becomes this:
@font-face {
font-family: My font;
src: url(/myfont.ttf.eot);
src: local(My font), url(/myfont.ttf.ttf) format(truetype); }
No matter how much I try, I can't have it quote either "My font" (with "!name") or "truetype" (it removes the quotes). Any ideas on how I can do this?
Solution
It can be made a little better using string interpolation:
!name = "asdf"
.foo
font-family = "\"#{!name}\""
But I agree that we need a better approach for dealing with quoted strings in sass. Sass has enough context to do something intelligent here and not offload the quoting logic to the user.
OTHER TIPS
You can quote in your variables, use single quotes inside double quotes. This is how I do it:
!string = "'Myriad Pro', 'Lucida Sans', Helvetica, Arial, sans-serif"
.foo
:font-family= !string
This will compile correctly to:
.foo{
font-family: 'Myriad Pro', 'Lucida Sans', Helvetica, Arial, sans-serif; }
I think you can't quote the other way round (i.e. double quotes inside single quotes). Doing that will give you compile errors.
Hope that helped!
Okay, I found that I need to do:
"\"" + !name + "\""
Damn that's some awkward syntax...
Using http://www.fontsquirrel.com/fontface/generator I have a corresponding 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'")
This puts quotes around things:
@font-face {
src: url("\"#{$ngx-font-path}/ngx-icon.eot\"");
}