Generated by SassMeister.com.

input.scss

.game {
    $majorsImp: 'Fireplace1', 'Fireplace2', 'CookingHearth1', 'CookingHearth2', 'ClayOven', 'StoneOven', 'Joinery', 'Pottery', 'Basket', 'Well';

    @each $mId in $majorsImp {
      $i: index($majorsImp, $mId);
      &[data-id='Major_#{$mId}'] {
        .card-icon {
          background-position-x: (($i - 1) % 5) * 100% / 4;
          background-position-y: (($i - 1 - ($i - 1) % 5) / 5) * 100%;
        }
      }
    }
}

output.css

.game[data-id=Major_Fireplace1] .card-icon {
  background-position-x: 0%;
  background-position-y: 0%;
}
.game[data-id=Major_Fireplace2] .card-icon {
  background-position-x: 25%;
  background-position-y: 0%;
}
.game[data-id=Major_CookingHearth1] .card-icon {
  background-position-x: 50%;
  background-position-y: 0%;
}
.game[data-id=Major_CookingHearth2] .card-icon {
  background-position-x: 75%;
  background-position-y: 0%;
}
.game[data-id=Major_ClayOven] .card-icon {
  background-position-x: 100%;
  background-position-y: 0%;
}
.game[data-id=Major_StoneOven] .card-icon {
  background-position-x: 0%;
  background-position-y: 100%;
}
.game[data-id=Major_Joinery] .card-icon {
  background-position-x: 25%;
  background-position-y: 100%;
}
.game[data-id=Major_Pottery] .card-icon {
  background-position-x: 50%;
  background-position-y: 100%;
}
.game[data-id=Major_Basket] .card-icon {
  background-position-x: 75%;
  background-position-y: 100%;
}
.game[data-id=Major_Well] .card-icon {
  background-position-x: 100%;
  background-position-y: 100%;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}