lessでダイナミックなクラスを作成する方法

Question

私は答えを探していましたが、それは私が本当に探しているものではないか、正しく検索していません。クラス名を動的に生成したい。 margin-topを頻繁に使用しているので、複数のクラスがルールのセットで定義されているため、LESSで達成したいと考えています。

私が研究した限り、ダイナミック生成クラスを作成することはできません。

.margin-top-(@value)px { 
    margin-top: @value; 
} 

所望の出力

.margin-top-20px { 
    margin-top: 20px; 
} 

.margin-top-100px { 
    margin-top: 100px; 
} 

私が期待してい何の単なる例：ここに私のコードです。

Answer 1

これを達成するためにmixinを使用してください。

//define the mixin 
.margin-top(@value) { 
    .margin-top-@{value}{  
     margin-top:@value; 
    } 
} 
//use the mixin like this 
.margin-top(20px); 

Uは、ここでそれを試すことができます：http://winless.org/online-less-compiler