generieren mehrere Klassen mit SCSS

Question

ich wie so mehrere Klassen für Abstand haben wollen:

.spacing-top-20 { 
    margin-top: 20px; 
} 
.spacing-top-40 { 
    margin-top: 40px; 
} 
.spacing-top-60{ 
    margin-top: 60px; 
} 

//and so on... 

Ist es möglich, irgendwie zu machen SCSS mehrere sehr ähnliche Klassen generieren? Ich weiß, das wäre ein schöner Fall, Mixins zu verwenden, aber dann würdest du es immer noch für jeden Abstand aufschreiben, den du haben willst.

Answer 1

können Sie @for Direktive verwenden:

@for $i from 1 to 4 { 
    .spacing-top-#{$i * 20} { margin-top: $i * 20px } 
}