A slightly offtopic answer (@ScottS already answered the actual question), just a few tips/hints on "conditional colour logic" to meet the subject title.
Alt. solution #1: Contrast.
When it comes to colour lightness, Less has the contrast function to conditionally select one of two colour values based on a third colour luma. E.g.:
.sectionstyles(@base-color) {
.product-single {
border: 1px solid
contrast(@base-color, @base-color,
lighten(@base-color, 45%), 10%);
// etc.
}
}
Note that contrast
internally uses luma
not lightness
so this snippet is not exactly equal to your initial code (the 10%
threshold value I used above roughly resembles 80%
lightness threshold for a gray shades).
Tip #1: Mixin parameter names.
Usually you don't have to use so specific "fully qualified" names for a mixin parameters. Since @section-base-color
is the parameter of the .sectionstyles
mixin and not a global variable, the section
prefix is somewhat redundant there. Just @base-color
(as I used above) in context of .sectionstyles
is naturally supposed to mean section styles base color
. We don't have to be so verbose when not necessary.
Tip #2: "Lightness of Lighten".
lightness(lighten(@section-base-color, 45%)) > 80%
can be simplified to lightness(@section-base-color) > 35%
(where 35%
is 80% - 45%
, i.e. an arithmetic addition of the lightness channel is what the lighten
does).
Alt. solution #2: Conditional mixins.
Though & when
may be seen as most obvious and less verbose method when compared to conditional mixins in general, it's not always true in many cases:
.sectionstyles(@base-color) {
.product-single {
border: 1px solid @border-color;
.-() {@border-color: lighten(@base-color, 45%)} .-();
.-() when (lightness(@base-color) > 35%) {
@border-color: @base-color;
}
// etc.
}
}
Conditional mixin beats conditional &
here as even while still being quite verbose we don't need to repeat border: ...
, lightness(...)
and 80%
twice (i.e. finishing with more maintainable code).