Generate list of classes from SCSS list - sass

Question

QUESTION: Is it possible to use a SCSS list to generate a number of classes without repeating the attributes?
The point is to keep the file easy maintainable by have ONE list ($svgs) of names which then can be used for classes or variables (see example below, $svg). This list is much larger in reality.
Note that I can't use .box i[class*=".icon-"] or similar selectors, as there are other elements that would be affected.
Here's the current SCSS, which works, but creates bloated CSS. .
$svgs: cancel, danger, exit;
#each $svg in $svgs {
.box i.icon- {
&#{$svg} {
background-image: url($svg + '.svg');
height: 24px;
width: 24px;
background-repeat: no-repeat;
background-size: contain;
}
}
}
Result CSS is:
.box i.icon-cancel {
background-image: url("cancel.svg");
height: 24px;
width: 24px;
background-repeat: no-repeat;
background-size: contain;
}
.box i.icon-danger {
background-image: url("danger.svg");
height: 24px;
width: 24px;
background-repeat: no-repeat;
background-size: contain;
}
.box i.icon-exit {
background-image: url("exit.svg");
height: 24px;
width: 24px;
background-repeat: no-repeat;
background-size: contain;
}
Desired CSS:
.box i.icon-cancel, .box i.icon-danger, .box i.icon-exit {
height: 24px;
width: 24px;
background-repeat: no-repeat;
background-size: contain;
}
.box i.icon-cancel {
background-image: url("cancel.svg");
}
.box i.icon-danger {
background-image: url("danger.svg");
}
.box i.icon-exit {
background-image: url("exit.svg");
}

Answer 1

To get this result you can use #extend with a placeholder selector:
$svgs: cancel, danger, exit;
%svg-styles {
height: 24px;
width: 24px;
background-repeat: no-repeat;
background-size: contain;
}
#each $svg in $svgs {
.box i.icon- {
&#{$svg} {
#extend %svg-styles;
background-image: url($svg + '.svg');
}
}
}