Can I use LESS mixins with `when` statement plus pseudo element - if-statement

Question

Can I use LESS mixins with when statement plus pseudo element?
I want to create a Mixins. The logical is if the primary color is white, then I need to give .userBadge:after secondary-color.
Here is my LESS mixins, but it seems like does not work.
.property-style(#primary-bgcolor, #primary-color, #secondary-bgcolor, #secondary-color) {
.wrapper {
background-color: #primary-bgcolor;
}
.userBadge:after(#primary-color, #secondary-color) when (#primary-color = "#fff") {
background: #secondary-color;
}
}
Can you please help? Thank you so much.

Answer 1

You have a few errors:
You're missing the # in front of secondary-color
Mixins are class-like .x, not arbitrary selectors. x::after(...) is invalid - you'd need x(...) {&::after {...} }
Your .property-style mixin defines a mixin, but you never called that mixin
Your .userBadge mixin defines a mixin, but you never called that mixin
In this case "#fff" needs to be #fff without quotes - otherwise your color would have to be "#fff" instead of #fff! :D
Here's a working version of what you have (I'm leaving out #secondary-bgcolor since you didn't use it for anything) [working demo]
.property-style(#primary-bgcolor, #primary-color, #secondary-color) {
// `.wrapper` styles
.wrapper {
background-color: #primary-bgcolor;
}
// define the other mixin. note that we _could_ use the same variable names
// but they are _new_ variables - I've given them new names to
// help us remember that they won't automatically inherit the values of the parent mixin
.myOtherMixin(#primary, #secondary) when (#primary = #fff) {
background: #secondary
}
.userBadge::after {
.myOtherMixin(#primary-color, #secondary-color)
}
}
.property-style(#ccc,#fff,#eee); // result:
// .wrapper {background: #ccc;}
// .userBadge::after {background-color: #eee;}
However, nesting mixins can get pretty messy. This would be a little cleaner [working demo]
.variableColor(#color, #otherColor) when (#color = #fff) {
background: #otherColor
}
.property-style(#primary-bgcolor, #primary-color, #secondary-color) {
.wrapper {
background-color: #primary-bgcolor
}
.userBadge::after {
.variableColor(#primary-color, #secondary-color)
}
}
.property-style(#ccc,#fff,#eee); // result:
// .wrapper {background: #ccc;}
// .userBadge::after {background-color: #eee;}
Or if that variable color mixin doesn't actually need to be reusable [working demo]
.property-style(#primary-bgcolor, #primary-color, #secondary-color) {
.wrapper {
background-color: #primary-bgcolor;
}
}
.property-style(#primary-bgcolor, #primary-color, #secondary-color) when (#primary-color = #fff) {
.userBadge::after {
background: #secondary-color
}
}
.property-style(#ccc,#fff,#eee); // result:
// .wrapper {background: #ccc;}
// .userBadge::after {background-color: #eee;}
But wait let's back up. The fact that you didn't call your mixin, at least in the code you've provided, makes me wonder if the whole thing really needs to be in one. If you don't really need to be able to do something like
.property-style(#ccc, #ddd, #eee);
alternate {.property-style(#aaa, #fff, #bbb)}
this much simpler solution (which relies on default values) would do the trick [working demo]
#primary-bgcolor: #ccc;
#primary-color: #fff;
#secondary-color: #eee;
.badgeBg(#check: #primary-color, #ifPasses: #secondary-color) when (#primary-color = #fff) {
background: #secondary-color
}
.wrapper {
background-color: #primary-bgcolor
}
.userBadge::after {
.badgeBg
}
/*
result:
.wrapper {background: #ccc;}
.userBadge::after {background-color: #eee;}
*/
Bonus: just for kicks, here's a different approach you could take. It's definitely overkill for what you've shown here, but you might find it an interesting thing to study. It uses default values and property interpolation, and it makes the color in the "if" a dynamic part of the theme. [working demo]
.propertyValueCondition(#property, #value, #check: pass, #guard: pass) when (#check = #guard) {
#{property}: #value
}
.theme(#color1, #color2, #color3, #color4:#fff) {
.wrapper {
.propertyValueCondition(background-color, #color1)
}
.userBadge::after {
.propertyValueCondition(background, #color3, #color2, #color4)
}
}
.theme(#ccc, #ddd, #eee);
alternate {
.theme(#bbb, #aaa, #eee, #aaa)
}
/*
result:
.wrapper {background-color: #ccc;}
alternate .wrapper {background-color: #bbb;}
alternate .userBadge::after {background: #eee;}
*/