Replace classname into CSS with SASS -
i've got several class names , 99% identical - except background image. classname matches 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 there way reuse class name variable in css or recommend?
one can use predefined variable names selectors , css properties 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; } }
Comments
Post a Comment