如何为伪样式选择器编写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/