CODEWITHSUNDEEP
cssless
IntFooBar
IntFooBar

Reputation: 312

How to create dynamic classes in less

I've been looking for the answers, but either it's not what I am really looking for, or I am not searching up properly. I want to dynamically generate the class name. Since, I use margin-top quite frequently, I have multiple classes defined with a set of rules, and I want to achieve with LESS.

I don't think is possible to create dynamic generated classes, as far as I did my research. Here is my code:

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

Desired Output

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

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

Just an example of what I am expecting.

Upvotes: 2

Views: 1106

Answers (1)

blackmiaool
blackmiaool

Reputation: 5344

Try to use mixin to achieve this.

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

U can try it here: http://winless.org/online-less-compiler

Upvotes: 1

Related Questions