这个 mixin 为 Bootstrap 生成辅助类。
我确信有办法使用循环来改进这个 mixin。
.generate-margin-tops(@size) {
.mt-@{size}-5 {
margin-top: 5px;
}
.mt-@{size}-10 {
margin-top: 10px;
}
.mt-@{size}-20 {
margin-top: 20px;
}
.mt-@{size}-30 {
margin-top: 30px;
}
.mt-@{size}-40 {
margin-top: 40px;
}
}
片段用于不同的屏幕尺寸:
.generate-margin-tops(xs);
@media (min-width: @screen-sm-min) {
.generate-margin-tops(sm);
}
@media (min-width: @screen-md-min) {
.generate-margin-tops(md);
}
@media (min-width: @screen-lg-min) {
.generate-margin-tops(lg);
}