.size() improvement to replace .square()
KittyGiraudel opened this issue · comments
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
But in some cases you actually want height = 0.
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);
}
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;
}
Clever. I didn't know we could define 2 different mixins with the same name without one overriding the other.