CSS переменная внутри переменной Sass

Question

Когда я пытаюсь это сделать, у меня появляется ошибка: (--font-microgramma: "Microgramma_Com", --font-OpenSans: "OpenSans", --font-Stag: "Stag", --font- StagSans: "StagSans") не является допустимым значением CSS.

$theme-fonts: (
  // Fonts microgramma
  --font-microgramma: "Microgramma_Com",
  // Fonts OpenSans
  --font-OpenSans: "OpenSans",
  // Fonts Stag
  --font-Stag: "Stag",
  // Fonts Stag
  --font-StagSans: "StagSans",
);

body {

  box-sizing: border-box;
  line-height: 1.2;
  font-family:$theme-fonts(--font-OpenSans) , sans-serif;
}

Answer 1

Вы используете Sass Maps . Это не имеет ничего общего с переменной css. Вы можете написать это так, и он работает правильно. Вам нужно использовать функцию map-get, чтобы получить переменную из карты.

$theme-fonts: (
    "--font-microgramma": "Microgramma_Com",
    "--font-OpenSans": "OpenSans",
    "--font-Stag": "Stag",
    "--font-StagSans": "StagSans"
);

body {
  box-sizing: border-box;
  line-height: 1.2;
  font-family: map-get($theme-fonts, "--font-microgramma"), sans-serif;
}

Вывод:

body {
  box-sizing: border-box;
  line-height: 1.2;
  font-family: "Microgramma_Com", sans-serif;
}

(вам также не нужно двойное da sh.)