Creating multiple classes with LESS function

Question

I want to accomplish this css (and more not posted for brevity) with LESS so I can have more control and auto creation of classes. Not sure how much LESS can help me with it.

.m-xs {
    margin-top: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
}
.m-t-xs{
    margin-top: 5px;    
}
.m-r-xs{
    margin-right: 5px;
}
.m-b-xs{
    margin-bottom: 5px;
}
.m-l-xs{
    margin-left: 5px;
}
.m-h-xs{
    margin-right: 5px;
    margin-left: 5px;   
}
.m-v-xs{
    margin-top: 5px;
    margin-bottom: 5px;
}

I want this to be repeated for several sizes (xs, s, m, l, xl, etc) and also other properties like padding.

how can I use less to do this kind of 'autocreate' thing ? is even possible without writing all the classes? I never used LESS but I see heavy use of it on bootstrap and I think this can be achieved. I tested few things but looks like it's an advanced scenario because none of the tutorials have it covered.

thanks!

I don't think you would benefit from LESS as these are all explicit declarations that do not repeat. — Alex
– Alex, Commented Aug 12, 2013 at 21:35

Andrew Bryant · Accepted Answer · 2013-08-12 21:58:58Z

1

To generate the classes that you've mentioned there you could try parameterised mixins:

.classes (@size) {
  .m-@{size} {
    margin-top: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
  }

  .m-t-@{size}{
    margin-top: 5px;      
  }

  .m-r-@{size} {
    margin-right: 5px;
  }

  .m-b-@{size} {
    margin-bottom: 5px;
  }

  .m-l-@{size} {
    margin-left: 5px;
  }

  .m-h-@{size} {
    margin-right: 5px;
    margin-left: 5px;   
  }

  .m-v-@{size} {
    margin-top: 5px;
    margin-bottom: 5px;
  }
}

.classes(xs);
.classes(s);
.classes(m);
.classes(l);
.classes(xl);

Further parameterising as necessary.

answered Aug 12, 2013 at 21:58

Andrew Bryant

5294 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bart Calixto Over a year ago

wonderfull, anyway make the property parametrizable ? like .classes(@property, @size, @value) { @{property}-{@size}: @value;} <-- this doesn't work of course.

Andrew Bryant Over a year ago

I don't think you can parameterise parts of property names (I haven't been able to get that to work), but you can do the value (which is more what I was thinking). But the syntax uses semi-colons instead of commas: .classes(@size; @value) to declare and .classes(xs; 5px) to call.

Collectives™ on Stack Overflow

Creating multiple classes with LESS function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related