は動的にSASS

Question

を持つクラスを作成し、私は次のものを作成するためにSASSとループを使用することができます。

.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は、Googleで「SASSループ」を検索したときに取得。この最初の結果です。ここでは、参照されるページの@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