Geek Answers Handbook

How can I cast strings in SASS?

I use SASS to create @ font-face mixing, but 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 the following:

@font-face {
  font-family: My font;
  src: url(/myfont.ttf.eot);
  src: local(My font), url(/myfont.ttf.ttf) format(truetype); }

No matter how hard I try, I cannot quote it “My font” (with “! Name”) or “truetype” (it removes quotes). Any ideas on how I can do this?

+8
source share
6 answers

This can be done a little better using string interpolation:

!name = "asdf"
.foo
  font-family = "\"#{!name}\""

But I agree that we need a better approach for working with quoted strings in sass. Sass has enough context to do something smart here, rather than offload the citation logic to the user.

+6
source

, . :

!string = "'Myriad Pro', 'Lucida Sans', Helvetica, Arial, sans-serif"
.foo
  :font-family= !string

:

.foo{
  font-family: 'Myriad Pro', 'Lucida Sans', Helvetica, Arial, sans-serif; }

, (.. ). .

, !

+5

, , :

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

, - ...

+3

http://www.fontsquirrel.com/fontface/generator 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'")
+1

:

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

quote:

font-family: quote(!name)
0

More articles:


All Articles