Sass, marking a variable as a string [duplicate] - variables

Question

This question already has answers here:
Sass Interpolation of Mixin, Function, and Variable names
(3 answers)
Closed 8 years ago.
I'm trying to run a loop in Sass to generate the following variables:
$size-xs: 1em;
$size-sm: 1.1em;
$size-md: 1.2em;
$size-lg: 1.3em;
This is what I have so far:
$size-base:1em;
$size-increment:0.1em;
$size-list: "xs","sm","md","lg";
#each $value-size in $size-list {
$size-#{$value-size}:#{$i};
$i:$size-base + $size-increment;
}
The problems I'm having is the $size- is interpreted as a variable, but it's not, it's the root of a set of variables I'd like to generate. Any ideas on how to accomplish this?
Thanks so much for any help!

Answer 1

The error you were getting was because variable names can't be interpolated like that. (You were also trying to use $i before it was defined.)
But you can directly name the elements that will be styled. For example:
$size-base: 1em;
$size-increment: 0.1em;
$size-list: "xs", "sm", "md", "lg";
#each $value-size in $size-list {
$size-base: $size-base + $size-increment;
.#{$value-size} {
font-size: $size-base;
}
}
You can even just output silent placeholders instead of elements, and then extend them when needed.
$size-base: 1em;
$size-increment: 0.1em;
$size-list: "%xs", "%sm", "%md", "%lg";
#each $value-size in $size-list {
$size-base: $size-base + $size-increment;
#{$value-size} {
font-size: $size-base;
}
}
h2 {
#extend %lg;
}
This will only compile the h2 style declaration.
See the example at http://sassmeister.com/gist/a400ded59756a814c47e.