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!