less에서 동적 클래스를 만드는 방법

Question

나는 답을 찾고 있었지만, 내가 정말로 찾고있는 것이 아니거나 적절하게 검색하지 못하고있다. 동적으로 클래스 이름을 생성하고 싶습니다. margin-top을 자주 사용하기 때문에 일련의 규칙으로 정의 된 여러 클래스가 있고 덜 필요합니다.

내 연구를 수행하는 한 동적 생성 클래스를 만들 수 없다고 생각합니다.

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

원하는 출력

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

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

내가 기대하고 무엇을 그냥 예 : 여기 내 코드입니다.

Answer 1

이것을 달성하기 위해 믹스 인을 사용해보십시오.

//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