Как я могу процитировать строки в SASS?

Question

Я использую SASS для генерации миксина @ font-face, однако вот так:

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

становится таким:

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

Сколько бы я ни старался, у меня тоже не может быть цитаты "Мой шрифт" (с "! name") или "TrueType" (удаляет кавычки). Любые идеи о том, как я могу это сделать?

Answer 1

Это можно сделать немного лучше, используя интерполяцию строк:

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

Но я согласен, что нам нужен лучший подход для работы с цитируемыми строками в sass. У Sass достаточно контекста, чтобы сделать что-то умное и не перегружать логику цитирования для пользователя.

Answer 2

Вы можете заключать в кавычки свои переменные, используйте одинарные кавычки внутри двойных кавычек . Вот как я это делаю:

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

Это будет правильно скомпилировано в:

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

Я думаю, что вы не можете цитировать наоборот (то есть двойные кавычки внутри одинарных кавычек). Это даст вам ошибки при компиляции.

Надеюсь, это помогло!

Answer 3

Хорошо, я обнаружил, что мне нужно сделать:

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

Черт, это какой-то неловкий синтаксис ...

Answer 4

Использование http://www.fontsquirrel.com/fontface/generator У меня есть соответствующий миксин Sass:

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

Answer 5

Это помещает кавычки вокруг вещей:

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