SASS create multiple variables at once - html

Question

Is it possible to create a single SASS variable using map that then creates a variable for each key-value pair?
For example, I want this:
$heading: (
1: 5rem,
2: 4.5rem,
3: 4rem,
4: 3.5rem,
5: 3rem,
6: 2.5rem );
to turn into this:
$heading-1: 5rem;
$heading-2: 4.5rem;
$heading-3: 4rem;
$heading-4: 3.5rem;
$heading-5: 3rem;
$heading-6: 2.5rem;
I used the map to create class names for each variation, but I want to create the variables themselves and not the class names.

Answer 1

Maps are used to give you a more hierarchical way of visualising and referencing groups of data/values. You can use values from maps using map-get:
/* Map */
$heading: (
1: 5rem,
2: 4.5rem,
3: 4rem,
4: 3.5rem,
5: 3rem,
6: 2.5rem
);
/* Use map-get to make use of values from a map */
.heading-5 {
font-size: map-get($heading, 5);
}
/* Output */
.heading-5 {
font-size: 3rem;
}
You could have a simple function to use these, too:
/* Map */
$heading: (
1: 5rem,
2: 4.5rem,
3: 4rem,
4: 3.5rem,
5: 3rem,
6: 2.5rem
);
/* Simple reusable function to reference heading sizes */
#function heading($heading-size) {
#return map-get($heading, $heading-size);
}
.heading-4 {
font-size: heading(4);
}
/* Output */
.heading-4 {
font-size: 3.5rem;
}
Otherwise, if you want individual variables then you should just make individual variables.
Related: You can use an #each loop to produce CSS custom properties (rather than sass variables), which may actually suit your use case:
/* Map */
$heading: (
1: 5rem,
2: 4.5rem,
3: 4rem,
4: 3.5rem,
5: 3rem,
6: 2.5rem
);
/* Use an #each loop to generate CSS custom properties for all the map entries */
:root {
#each $heading-level, $heading-size in $heading {
--heading-#{$heading-level}: #{$heading-size};
}
}
/* Output */
:root {
--heading-1: 5rem;
--heading-2: 4.5rem;
--heading-3: 4rem;
--heading-4: 3.5rem;
--heading-5: 3rem;
--heading-6: 2.5rem;
}