How to ignore passed parameter in mixin
I want to use the Less mixin for borders in a project, but often I need to use different edges of a border, not all.
I wrote a simple mixin:
.border-all (@border; @border-type; @border-color) {
border-top: @border @border-type @border-color;
border-right: @border @border-type @border-color;
border-bottom: @border @border-type @border-color;
border-left: @border @border-type @border-color;
}
Is it possible, for example, to only pass arguments border-top
and border-bottom
?
So:
.class {
.border-all (3px; double; @border-color);
}
Displayed in:
.class {
border-top: 3px double #333;
border-bottom: 3px double #333;
}
Is it possible to ignore passing parameters to different CSS properties in a mixin?
source to share
Be that as it may, your current mixin cannot be modified to only send parameters to specific CSS properties. However, you can change the mixin as shown below and pass the sides as arguments.
.border-all (@border; @border-type; @border-color; @sides...) {
& when not (@sides = all){ /* if border is not needed on all sides */
.border-side(@index) when (@index > 0){
@side: extract(@sides, @index); /* extract the side specified for each iteration */
border-@{side}: @border @border-type @border-color; /* create property */
.border-side(@index - 1);
}
.border-side(length(@sides)); /* loop as many times as the no. of sides provided */
}
& when (@sides = all){ /* if border is needed for all sides */
border: @border @border-type @border-color; /* combined because there is no need for 4 separate properties. */
}
}
.demo{
.border-all(1px; solid; black; top, right);
}
.demo2{
.border-all(1px; solid; black; all);
}
You just need to pass the required sides as the last argument to the mixin and only the corresponding properties will be generated in the output CSS.
source to share
First of all, I would ask why you need this mixin at all. How is this better than simple border: 3px double @border-color;
?
Likewise, instead of creating some pretty bloated and confusing conditional logic for mixing, I would rather stick with a temporary variable, like this:
.class {
@border: 3px double @border-color;
border-top: @border;
border-bottom: @border;
}
Yes, it's three lines of code instead of one, but it's no doubt easier to maintain.
---
Anyway, if I had to use a mixin like this, I would probably simplify it something like this:
// usage:
.c1 {
.border(top right, 1px solid black);
}
.c2 {
.border(1px solid black);
}
// impl:
.border(@sides, @value) {
.side(length(@sides));
.side(@i) when (@i > 0) {
@side: extract(@sides, @i);
border-@{side}: @value;
.side(@i - 1);
}
}
.border(@value) {
border: @value;
}
As I really don't see the point in using all those fallback commas and / or semicolons in this case.
source to share