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

doğukan · Accepted Answer · 2020-05-26 15:07:21Z

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.)

answered May 26, 2020 at 15:07

doğukan

28k15 gold badges66 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS variable inside Sass variable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related