Replace classname into CSS with SASS - css

Question

I've got several class names and they are all 99% identical - except the background image. The classname always matches the image filename:
Example (see .icon_hero_rank-19):
.brawler .rank.icon_hero_rank-19 {
background-image: url("/images/ranks/icon_hero_rank-19.png");
position: absolute;
top: 85%;
left: 0;
width: 40px;
height: 45px;
line-height: 45px;
background-size: contain;
display: inline-block;
text-align: center;
font-weight: normal;
vertical-align: middle;
font-family: "BrawlStarsDeputy";
color: white;
font-size: 1.5rem;
text-shadow: 0px 3px 2px rgba(0, 0, 0, 0.8);
letter-spacing: 1px;
z-index: 10;
}
The question:
So is there a way to reuse the class name as variable in my CSS or what do you recommend?

Answer 1

One can use predefined variable names for the selectors and for the CSS properties like this:
$icon-list: (
icon_hero_rank-00,
icon_hero_rank-19
);
#each $icon in $icon-list {
.brawler .rank.#{$icon}{
background-image: url("/images/ranks/#{$icon}.png");
position: absolute;
top: 85%;
left: 0;
width: 40px;
height: 45px;
line-height: 45px;
background-size: contain;
display: inline-block;
text-align: center;
font-weight: normal;
vertical-align: middle;
font-family: "BrawlStarsDeputy";
color: white;
font-size: 1.5rem;
text-shadow: 0px 3px 2px rgba(0, 0, 0, 0.8);
letter-spacing: 1px;
z-index: 10;
}
}

Answer 2

Sure, you can use for loop
Take a look at this
$string-template: "icon_hero_rank-";
$start: 0;
#for $i from 1 through 8 {
.brawler .rank.#{$string-template}#{$i+$start} {
background-image: url("/images/ranks/#{$string-template}#{$i+$start}.png");
position: absolute;
top: 85%;
left: 0;
width: 40px;
height: 45px;
line-height: 45px;
background-size: contain;
display: inline-block;
text-align: center;
font-weight: normal;
vertical-align: middle;
font-family: "BrawlStarsDeputy";
color: white;
font-size: 1.5rem;
text-shadow: 0px 3px 2px rgba(0, 0, 0, 0.8);
letter-spacing: 1px;
z-index: 10;
}
}

Answer 3

Building on the answer your already posted, kentor, you could considerably condense your compiled CSS by using attribute selectors to set all the shared styles only one time and then set the background image in the #each function.
.brawler div[class*="icon_hero_"].rank {
position: absolute;
top: 85%;
left: 0;
width: 40px;
height: 45px;
line-height: 45px;
background-size: contain;
display: inline-block;
text-align: center;
font-weight: normal;
vertical-align: middle;
font-family: "BrawlStarsDeputy";
color: white;
font-size: 1.5rem;
text-shadow: 0px 3px 2px rgba(0, 0, 0, 0.8);
letter-spacing: 1px;
z-index: 10;
}
$icon-list: (
rank-00,
rank-19
);
#each $icon in $icon-list {
.brawler div[class$="#{$icon}"].rank{
background-image: url("/images/ranks/#{$icon}.png");
}
}
That way, you don't end up with the shared styles repeated a bunch of times in your stylesheet.