CODEWITHSUNDEEP
csslessmixins
Jeepstone
Jeepstone

Reputation: 2601

Conditional logic based on colour in Less

I have the following mixin using Less that takes the input colour and shades a few boxes etc. I use a lightened version of the colour for borders but sometimes I find that my colour is too light and so ends up as white. What I'd like to do is check if the lightened colour is white (or 80%) and make it just the default colour being passed in. I've put my when statement in to switch between the colours but I get a NameError variable @section-base-color is undefined. I'm not sure to how to get this to work on a parameter passed in.

.sectionstyles(@section-base-color) {
    .product-single {

        & when (lightness(lighten(@section-base-color, 45%)) > 80%) {
            border: 1px solid @section-base-color;

        }
        & when (lightness(lighten(@section-base-color, 45%)) <= 80%) {
            border: 1px solid lighten(@section-base-color, 45%);            }
        .clearfix;
        a {
            margin-top: 0;
            color: @section-base-color;

            h2 {
                margin: 0 (-@padding-base-horizontal);
                padding: @padding-base-horizontal;
                color: @section-base-color;
            }
            p {
                color: @text-color;
            }
            &:hover, &:focus {
                color: #FFF;
                h2 {
                    background-color: @section-base-color;
                    color: #FFF;
                }

            }
        }

    } 
}

For reference, the function is lightness, not lightenless. This was causing me a problem.

Upvotes: 0

Views: 741

Answers (2)

seven-phases-max
seven-phases-max

Reputation: 11820

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).

Upvotes: 1

ScottS
ScottS

Reputation: 72261

Option 1: Upgrade LESS

Stick with what you have, and upgrade to LESS 1.7.

Option 2: Explicitly set variable inside mixin

This works for LESS 1.6:

.sectionstyles(@section-base-color-input) {
    @section-base-color: @section-base-color-input;
    etc... (rest of code the same)

There seems to be a bug in the & when syntax with respect to looking at mixin parameters in 1.6, but if you use that parameter to explicitly set a local variable inside the mixin, that variable is accessible as expected.

Upvotes: 2

Related Questions