css - How to make this series of rules into a mixin? -

css - How to make this series of rules into a mixin? -

i using serie of classes on css this:

.separate-10{ & > * + *{ display: block; margin: 10px 0 0 0; } } .separate-20{ & > * + *{ display: block; margin: 20px 0 0 0; } } .separate-50{ & > * + *{ display: block; margin: 50px 0 0 0; } } .separate-70{ & > * + *{ display: block; margin: 70px 0 0 0; } }

to utilize this:

aside{ .separate-50(); }

and thinking, maybe thought create them function. possible less? how it?

you can create mixin this

.separate(@top: 0) { & > * + *{ display: block; margin: @top 0 0 0; } }

and phone call like

aside{ .separate(50px); } aside{ .separate(20px); }

the @top: 0 defines default value of @top in case don't pass in anything

you can take in multiple parameters if needed

.separate(@top: 0, @right: 0, @bottom: 0, @left: 0) { & > * + *{ display: block; margin: @top @right @bottom @left; } } aside{ .separate(20px, 10px, 3px, 90px); }

css less