SASS CSS: интерполяция строк выдает неожиданное значение

Question

Я пробовал следующие варианты:

font-family: "Dosis" , Helvetica, Arial, Lucida, sans-serif;

font-family: "'Dosis'", + Helvetica, Arial, Lucida, sans-serif;

font-family: "Dosis", + Helvetica, Arial, Lucida, sans-serif;

Что я хочу:

font-family: 'Dosis',  Helvetica, Arial, Lucida, sans-serif;

И что я получаю:

Answer 1

Вам не нужна интерполяция.

$dosis: 'Dosis';

.foo {
  font-family: $dosis, Helvetica, Arial, Lucida, sans-serif;
}

Или, если вы хотите, чтобы весь стек шрифтов был переменной:

$font-stack: 'Dosis', Helvetica, Arial, Lucida, sans-serif;

.foo {
  font-family: $font-stack;
}