SCSS button sprite background position and size adjustments This lets you set a desired button height as a variable. Then it stretches and repositions the button background image sprite based on the desired height so that the button looks as it shou

styles.scss

$sprite-color-position: 1;
$sprite-section-height: 33;
$sprite-total-image-height: 198;
$desired-button-height: 66px;

background-position: 0 calc (-3 * #{$desired-button-height});
background-size: 2px calc(#{$sprite-total-image-height}px * 2);
background-position: 0 calc(-1 * (#{$sprite-color-position} - 1) * #{$sprite-section-height}px / #{$desired-button-height});
// background size: width height;
height: $desired-button-height;
line-height: $desired-button-height;