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

问题描述

问 题

.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怎么实现呢？

解决方案

SASS

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

这篇关于html - css样式多个选择器如何简写为一个？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！