Extremely useful LESS/CSS utilities

prefixes.css

.pf1(@prop, @value) {
  we: ~`"suck; " +
       " -webkit-@{prop}: @{value};" +
       " -moz-@{prop}: @{value};" +
       " -o-@{prop}: @{value};" +
       " -ms-@{prop}: @{value};" +
       " @{prop}: @{value}"`;
}

.pf2(@prop, @value) {
  we: ~`"suck; " +
       " @{prop}: -webkit-@{value};" +
       " @{prop}: -moz-@{value};" +
       " @{prop}: -o-@{value};" +
       " @{prop}: -ms-@{value};" +
       " @{prop}: @{value}"`;
}

// the "we: suck" hack is necessary to make LESS parse that insanity.

// usage:
div.flexible {
  .pf2(display, flex);
  .pf1(flex-direction, row);
  .pf1(justify-content, center);
  .pf1(align-content, center);
  .pf1(align-items, stretch);
}

// originally found it here: http://sjevsejev.blogspot.ro/2012/07/lessjs-function-generates-prefixes-for.html