динамически создавать классы с дерзостью

Question

Могу ли я использовать дерзость и петлей, чтобы создать следующее:

.m-t-0 { 
    margin-top: 0px !important; 
} 

.m-t-1 { 
    margin-top: 1px !important; 
} 

.m-t-2 { 
    margin-top: 2px !important; 
} 

.m-t-3 { 
    margin-top: 3px !important; 
} 

.m-t-4 { 
    margin-top: 4px !important; 
} 

.m-t-5 { 
    margin-top: 5px !important; 
} 

.m-t-6 { 
    margin-top: 6px !important; 
} 

Answer 1

This это первый результат, который вы получите, когда вы ищете «петлю Sass» на Google. Вот что мы имеем в @for части указанной странице:

@for $i from 1 through 4 
    .#{$class-slug}-#{$i} 
    width: 60px + $i 

После того, адаптированной к примеру вы предоставили, вы получите это:

@for $i from 0 through 6 
    .m-t-#{$i} 
    margin-top: 1px * $i !important