0

I created small Less @mixin for lightness value conditional. I was using Sass for my applications UI's and I'm realy confused how to create good conditionals in Less. Can anybody answer me that, is it good pice of code for Less conditionals?

Less source:

.lightness (@conditionalValue, @lightnessPercentage, @propertyName, @truePropertyValue, @falsePropertyValue) when (lightness(@conditionalValue) >= @lightnessPercentage) {
    @{propertyName}: @truePropertyValue;
}
.lightness (@conditionalValue, @lightnessPercentage, @propertyName, @truePropertyValue, @falsePropertyValue) when (lightness(@conditionalValue) < @lightnessPercentage) {
    @{propertyName}: @falsePropertyValue;
}


.class1 { .lightness(white,65%,background,black,white) }
.class2 { .lightness(black,65%,background,black,white) }

Css output:

.class1 {
  background: black;
}
.class2 {
  background: white;
}
MagicJoseph
  • 59
  • 1
  • 4
  • There is nothing wrong in writing guarded mixins but I feel you are looking for the same logic described in [this thread](http://stackoverflow.com/questions/21600825/conditional-css-based-on-background-color-variable). – Harry Jul 10 '15 at 09:07
  • Oh, thanks for that link! – MagicJoseph Jul 10 '15 at 09:17
  • Glad to help. I am closing this as a dupe. If you get stuck implementing it, edit the question and add the relevant details. – Harry Jul 10 '15 at 09:28

0 Answers0