Question

I have created a LESS mixin for margins that accepts multiple numeric values and spits out a css value/property pair with a rem unit of measurement and a px fall-back.

Here is what I need help with:

1. I want the mixin to be able to accept a valid string-based property such as “auto” or “inherit”
2. I want to be able to only declare the amount of arguments that is nessecary. eg. If i only need a margin-left, then I only want to have to write something like .margin(nope,nope,nope,1);.

Here is what I have so far:

.margin(@sizeValueTop: auto, @sizeValueRight: 0, @sizeValueBottom: 0, @sizeValueLeft: 0) {
  @pxValueTop: (@sizeValueTop * 16);
  @remValueTop: (@sizeValueTop);
  @pxValueRight: (@sizeValueRight * 16);
  @remValueRight: (@sizeValueRight);
  @pxValueBottom: (@sizeValueBottom * 16);
  @remValueBottom: (@sizeValueBottom);
  @pxValueLeft: (@sizeValueLeft * 16);
  @remValueLeft: (@sizeValueLeft);
  margin-top: ~"@{pxValueTop}px"; 
  margin-top: ~"@{remValueTop}rem";
  margin-right: ~"@{pxValueRight}px"; 
  margin-right: ~"@{remValueRight}rem";
  margin-bottom: ~"@{pxValueBottom}px"; 
  margin-bottom: ~"@{remValueBottom}rem";
  margin-left: ~"@{pxValueLeft}px"; 
  margin-left: ~"@{remValueLeft}rem";
}

body{
  .margin(1,1,1,1);
}

Any help would be great.

Answer 1

1) Wanting to prevent it from doing the math of auto * 16? Not possible, unless they slipped in if/else control statements when I wasn’t looking. Guards are the only way you can check an argument’s type. This means multiple declarations of the same mixin to cover all of your bases. Though, you can have mixins calling other mixins…

2) Also not possible. Place the arguments you are most likely to leave as defaults last. In your example, there’s no advantage to typing nope over 0 since your default values are 0 on 3/4 of your arguments.