scss SCSS按钮精灵背景位置和大小调整

Posted 2021-05-17

$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;