Generated by SassMeister.com.

input.scss

$pill-shape-position: (
	'ps-figure-eight': -32px,
	'ps-character': -108px,
	'ps-barrel': -186px,
	'ps-ovoid-rectangular': -264px,
	'ps-triangle': -344px,
	'ps-rectangle': -420px,
	'ps-bowtie': -498px,
	'ps-pentagon': -578px,
	'ps-diamond': -654px,
	'ps-d-shape': -732px,
	'ps-gear': -810px,
	'ps-capsule': -888px,
	'ps-shield': -966px,
	'ps-hourglass': -1044px,
	'ps-hexagon': -1124px,
	'ps-octagon': -1202px,
	'ps-heart': -1278px,
	'ps-square': -1356px,
	'ps-egg': -1434px,
	'ps-peanut': -1512px,
	'ps-circle': -1590px,
	'ps-heptagon': -1670px,
	'ps-teardrop': -1746px,
	'ps-biconcave': -1824px,
	'ps-kidney': -1902px,
	'ps-u-shape': -1980px,
	'ps-oval': -2054px,
	'ps-other': -2136px,
);

@each $shape, $x-position in $pill-shape-position {
	.#{$shape} {
		background-position: center $x-position;
	}
}

output.css

.ps-figure-eight {
  background-position: center -32px;
}

.ps-character {
  background-position: center -108px;
}

.ps-barrel {
  background-position: center -186px;
}

.ps-ovoid-rectangular {
  background-position: center -264px;
}

.ps-triangle {
  background-position: center -344px;
}

.ps-rectangle {
  background-position: center -420px;
}

.ps-bowtie {
  background-position: center -498px;
}

.ps-pentagon {
  background-position: center -578px;
}

.ps-diamond {
  background-position: center -654px;
}

.ps-d-shape {
  background-position: center -732px;
}

.ps-gear {
  background-position: center -810px;
}

.ps-capsule {
  background-position: center -888px;
}

.ps-shield {
  background-position: center -966px;
}

.ps-hourglass {
  background-position: center -1044px;
}

.ps-hexagon {
  background-position: center -1124px;
}

.ps-octagon {
  background-position: center -1202px;
}

.ps-heart {
  background-position: center -1278px;
}

.ps-square {
  background-position: center -1356px;
}

.ps-egg {
  background-position: center -1434px;
}

.ps-peanut {
  background-position: center -1512px;
}

.ps-circle {
  background-position: center -1590px;
}

.ps-heptagon {
  background-position: center -1670px;
}

.ps-teardrop {
  background-position: center -1746px;
}

.ps-biconcave {
  background-position: center -1824px;
}

.ps-kidney {
  background-position: center -1902px;
}

.ps-u-shape {
  background-position: center -1980px;
}

.ps-oval {
  background-position: center -2054px;
}

.ps-other {
  background-position: center -2136px;
}

settings.json

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