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?

Orthographize

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.

Giroux

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!

Parapsychology

FTR we had it the other way around (double quotes inside single quotes), which actually compiled fine, but the result was not really working on the browser (the font-family just didn't get recognized). Changing the order did the trick for us :-) – Nahum

Answer 3

Okay, I found that I need to do:

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

Damn that's some awkward syntax...

Orthographize

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

Inerney

Answer 5

This puts quotes around things:

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

Vescuso

Answer 6

You can use the string function quote:

font-family: quote(!name)

Lemniscus

Answer 7

A simple way to escape the quotes is to use the SASS inspect function. This is the way that Bootstrap interpolates font variables and allows you to use a string that includes quotes instead of wrapping the whole string in quotes.

$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto;

--my-escaped-font-family: #{inspect($font-family-sans-serif)};

Oxbridge