How can I quote strings in SASS?

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

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.


Okay, I found that I need to do:

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

Damn that's some awkward syntax...


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!

Tags:

Css

Ruby

Sass