.size() improvement to replace .square()

[Kitty Giraudel]

You currently use 2 mixins for sizing: .size(@w, @h) and .square(@w). Maybe you could use a single one, making the whole thing easier to use.

I'm definitely not a LESS ninja, but here is what I came with. Probably could it be improved:

.size(@width, @height) {
  width: @width;
  height: @height; 
}

.size(@width, @height: 0) when (@height = 0) {
  width: @width;
  height: @width; 
}

.a {
  .size(10em);
} 

http://codepen.io/HugoGiraudel/pen/db3e3a09a9f0ad9e477da50f6d394f46

[Tamás Pap]

But in some cases you actually want height = 0.

[Kitty Giraudel]

Then use none instead of 0. It works as well.

.size(@width, @height) {
  width: @width;
  height: @height; 
}

.size(@width, @height: none) when (@height = none) {
  width: @width;
  height: @width; 
}

.a {
  .size(10em);
} 

[Fabien]

the simplest way to do it :

/* Mixin */
.size(@square) {
  width: @square;
  height: @square;
}

.size(@width, @height) {
  width: @width;
  height: @height;
}

/* Usage */
.element {
   .size(10px); // render width:10px; height:10px;
}

.element {
   .size(10px, 20px); // render width:10px; height: 20px;
}

[Kitty Giraudel]

Clever. I didn't know we could define 2 different mixins with the same name without one overriding the other.

[Fabien]

Yeah i was surprise too when i discover that. It's work pretty well for simple mixin like this however you might run into conflict if you trying to use this when create deep level mixins.

In between @mdo what you did here for preboot with mixins doc really miss in bootstrap