CSS variable inside Sass variable

Question

When i'm trying this it's throws me an error : (--font-microgramma: "Microgramma_Com", --font-OpenSans: "OpenSans", --font-Stag: "Stag", --font-StagSans: "StagSans") isn't a valid CSS value.

$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

You're using Sass Maps. This has nothing to do with css variable. You can write it as follows and it works properly. You need to use the map-get function to get variable from map.

$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;
}

Output:

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

(You also don't need a double dash.)