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?

Answer 1

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.

Answer 2

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!

Answer 3

Okay, I found that I need to do:

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

Damn that's some awkward syntax...

Answer 4

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

Answer 5

This puts quotes around things:

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