css样式多个选择器如何简写为一个？

Question

.level-1 {
    padding-left: 10px;
}
.level-2 {
    padding-left: 20px;
}
.level-3 {
    padding-left: 30px;
}
.level-4 {
    padding-left: 40px;
}
.level-5 {
    padding-left: 50px;
}
.level-6 {
    padding-left: 60px;
}

能不能简写一下？或者用预处理器scss怎么实现呢？

Answer 1

SASS

@for $i from 1 to 6 {
　.level-#{$i} {
　　　padding-left: #{$i * 10}px;
　}
}