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);
        .card--#{$mId} {
          background-position-x: (($i - 1) % 5) * 100% / 4;
          background-position-y: (($i - 1 - ($i - 1) % 5) / 5) * 100%;
        }
    }
}

output.css

.game .card--Fireplace1 {
  background-position-x: 0%;
  background-position-y: 0%;
}
.game .card--Fireplace2 {
  background-position-x: 25%;
  background-position-y: 0%;
}
.game .card--CookingHearth1 {
  background-position-x: 50%;
  background-position-y: 0%;
}
.game .card--CookingHearth2 {
  background-position-x: 75%;
  background-position-y: 0%;
}
.game .card--ClayOven {
  background-position-x: 100%;
  background-position-y: 0%;
}
.game .card--StoneOven {
  background-position-x: 0%;
  background-position-y: 100%;
}
.game .card--Joinery {
  background-position-x: 25%;
  background-position-y: 100%;
}
.game .card--Pottery {
  background-position-x: 50%;
  background-position-y: 100%;
}
.game .card--Basket {
  background-position-x: 75%;
  background-position-y: 100%;
}
.game .card--Well {
  background-position-x: 100%;
  background-position-y: 100%;
}

settings.json

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