can get the value from map-get in SCSS

Question

All right

Inside a component, I'm using the scss map-get method to get a specific value from a variable that I've defined in global scss file.

My class looks like this.

 .class{
  transition: background-color 500ms ease-out;
  background: var(--background-color);
  padding-top: map-get($site-section-padding,var(--padding-top));
  padding-bottom: map-get($site-section-padding, var(--padding-bottom));
}

And my variable

$site-section-padding: (
  'default': 0px,
  'XXS': 8px,
  'XS': 16px,
  'S': 24px,
  'M': 32px,
  'L': 40px,
  'XL': 56px,
  'XXL': 72px
);

Let's get a look into the paddings properties, the map-get get its value from the var(--padding-#) method, but i'm not getting anything. I think that map-get can not resolve the var method.

I do not have any issue to get the value from mapping when i directly use a string value, example map-get($site-section-padding,'XS')

So any ideas why it does not works and maybe some alternatives to fix it.

Answer 1

You cannot use CSS variables in Sass.

CSS variables get value at the runtime. Sass is a preprocessor. it can't read the value of a variable which will get value at runtime!

You can create your CSS var based on the SCSS variable:

$accent-color: #ff0000;
--accent-color: #{$accent-color};

Then in Sass function use $accent-color and in CSS Use var(--accent-color).

In your case

$padding-top: XS;
--padding-top: #{padding-top};
$padding-bottom: S;
--padding-bottom: #{padding-bottom};

.class{
  transition: background-color 500ms ease-out;
  background: var(--background-color);
  padding-top: map-get($site-section-padding,$padding-top);
  padding-bottom: map-get($site-section-padding, $padding-bottom);
}