Skip to content

Instantly share code, notes, and snippets.

@leocaseiro
Created June 20, 2022 08:38
Show Gist options
  • Save leocaseiro/7bae3975be69592db9e14cf23cf35bbe to your computer and use it in GitHub Desktop.
Save leocaseiro/7bae3975be69592db9e14cf23cf35bbe to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
.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%;
}
}
}
.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%;
}
{
"sass": {
"compiler": "dart-sass/1.32.12",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment