scss 号码精灵

Posted 2021-05-17

@mixin sprite($path, $w, $ratio) {
    $h: $w * $ratio;
    display: inline-block;
    width: $w;
    height: $h;
    background-image: url($path);
    background-size: 100% auto;
    background-repeat: no-repeat;
    color: transparent;
    line-height: 0;
    &[data-count='0'] {
        background-position: center 0;
    }
    &[data-count='1'] {
        background-position: center ($h * -1);
    }
    &[data-count='2'] {
        background-position: center ($h * -2);
    }
    &[data-count='3'] {
        background-position: center ($h * -3);
    }
    &[data-count='4'] {
        background-position: center ($h * -4);
    }
    &[data-count='5'] {
        background-position: center ($h * -5);
    }
    &[data-count='6'] {
        background-position: center ($h * -6);
    }
    &[data-count='7'] {
        background-position: center ($h * -7);
    }
    &[data-count='8'] {
        background-position: center ($h * -8);
    }
    &[data-count='9'] {
        background-position: center ($h * -9);
    }
}