1

I am trying to create a mixin whereby I can change the unit from px to rem. For now, I have the following code:

@emSize : 16px;
@pxr    : 1 / unit(@emSize, rem);

.padding(@padding) {padding: @padding * @pxr;}

.test {.padding(10px);}

This works fine if I only have one number in the mixin, but it does not work if I have multiple numbers. For instance, this does NOT work:

.test {.padding(10px 25px);}

What I cannot figure out is how to I could get this to work in Less.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Moshe
  • 551
  • 3
  • 7
  • 17
  • What happened to the second answer? It seems to have disappeared. – Moshe Mar 01 '16 at 15:19
  • Possible duplicate of [Concatenating arbitrary number of values in lesscss mixin](http://stackoverflow.com/questions/8503088/concatenating-arbitrary-number-of-values-in-lesscss-mixin) – Marcos Pérez Gude Mar 01 '16 at 15:21
  • The other answer was removed by the author, since I downvoted because was a only-link answer with a text copied from the blog attached. The blog is that: http://www.toekneestuck.com/blog/2012/05/15/less-css-arguments-variable/ but is out of date. Is better the duplicated entry that I mark before. – Marcos Pérez Gude Mar 01 '16 at 15:23

1 Answers1

2

Option 1

You can use the comma separated values to achieve the same with your minimal code:

@emSize : 16px;
@pxr    : 1 / unit(@emSize, rem);

.padding(@verticalpad, @horizontalpad) {
      padding: (@verticalpad * @pxr) (@horizontalpad * @pxr);
}

.test {
      .padding(10px, 25px);
}

See it working

Option 2

Did you tried with two functions separated?

@emSize : 16px;
@pxr    : 1 / unit(@emSize, rem);

.paddingver(@paddingver) {
       padding-top: @paddingver * @pxr; 
       padding-bottom: @paddingver * @pxr;
}
.paddinghor(@paddinghor) {
       padding-left: @paddinghor * @pxr;
       padding-right: @paddinghor * @pxr;
}

.test {
       .paddingver(10px);
       .paddinghor(25px);
}

See it working

Marcos Pérez Gude
  • 21,869
  • 4
  • 38
  • 69
  • This works fine if I know that I only want 2 numbers. What I want is the ability to add anywhere from 1 to 4 numbers and have each number converted to rem. I could make 4 mixins, but I would rather have one mixin with the needed flexibility. – Moshe Mar 01 '16 at 15:16
  • So see the duplicated entry in the question comments. – Marcos Pérez Gude Mar 01 '16 at 15:22