Facilitando a inclusão de códigos em diferentes browsers

Eu tenho um componente que utiliza o input range e dentro dele eu preciso estilizar o botão do range. Eu utilizo o Sass e o projeto já tem o tratamento automatizado em diferentes browsers. Mas o input range tem nomenclaturas diferentes para o pseudo elemento de thumb e por isso é necessário estilizar o thumb em cada browser.

.range {
    background-color: blue

    &::-webkit-slider-thumb {
        cursor: grab;
    }

    &::-moz-range-thumb {
        cursor: grab;
    }

    &::-ms-thumb {
        cursor: grab;
    }

O código acima funciona, mas eu queria entender se existe uma forma melhor de escreve-lo.

Por exemplo, a forma abaixo eu imagino que seria muito melhor de escrever e dar manutenção. Mas ela não funciona e eu não entendo muito o porque dela não funcionar. Alguém saberia o porque e se teria um jeito melhor ?

.range {
    background-color: blue

    &::-webkit-slider-thumb, 
    &::-moz-range-thumb,
    &::-ms-thumb {
        cursor: grab;
    }