Search code examples
cssrubysass

How can I quote strings in SASS?

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.