Как написать SASS классы для селекторов псевдо стилей

Question

У меня есть класс для стилизации полосы прокрутки, можно ли ее написать чище без необходимости в классе для каждого селектора?

/* width */
.scrollbar::-webkit-scrollbar {
    width: 10px;
}

/* Track */
.scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1; 
}

/* Handle */
.scrollbar::-webkit-scrollbar-thumb {
    background: #888; 
}

/* Handle on hover */
.scrollbar::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

Примерно так:

.scrollbar {
    ::-webkit-scrollbar-thumb { ... }
    ::-webkit-scrollbar { ... }
    ...
}

Answer 1

Да, вы можете использовать амперсанд синтаксис:

.scrollbar {
    &::-webkit-scrollbar-thumb { ... }
    &::-webkit-scrollbar { ... }
    ...
}

Здесь вы можете увидеть это в скрипке: https://jsfiddle.net/k3s8rt54/