How to access a SCSS variable with multiple properties

0
votes

I'm working with a SCSS framework that has variables as multiple properties. How to a access and use these variables?

I can use the variables with a CSS property like color. But other variables have multiple CSS properties. How do I use this in my SCSS? I've tried @include and @extend but I get an error.

Below is a normal variable I can use:

$hover: #e5e5e5,

Below is a variable with multipls css properties that I don't know how to use.

$heading: (
font-size: 2rem,
font-weight: 400,
line-height: 1rem,
letter-spacing: 0.5px, )

Thanks!

2
sass
it's provide you SASS Mixin , it act like a function follow this link more details: sass-lang.com/documentation/at-rules/mixin – Md. Abu Sayed

2 Answers

1
votes

That is not just a regular variable but a map. Checkout: https://sass-lang.com/documentation/values/maps for details.

You can use it like this:

font-size: map.get($heading, font-size);
0
votes

This is how Extend/Inheritance correctly

%message-shared {
  font-size: 2rem;
  font-weight: 400;
  line-height: 1rem;
  letter-spacing: 0.5px;
}

.message {
  @extend %message-shared;
}