Search code examples
csswebkitlessmozilla

LESS contrast() function

As you probably know LESS offers many chromatic-oriented operations (e.g.: darken(), lighten() and mix()) and they all work great. Unfortunately, I can't get to work one of the theoretically coolest: the function to automatically set a colour in contrast with the one you provide. From official LESS spec:

contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]);

So, my LESS is basically provided with a background variable that can vary a lot (I'm working on theme-based website) and its text colour should adapt.

   &.popup{
      .body{
         background-color: @popupBg;
         color: contrast(@popupBg, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]);
      }
   }

When inspecting the output code in the console, I can see the function not properly parsed (Chrome notifies the error, Firefox just hides it). I also tried the simplified version which is just color: contrast(@popupBg); and had no luck.

Has anybody used this before? I've been using LESS for quite a lot now and this is the first time it gives me problems.

Solution

  • The square brackets denote optional arguments and shouldn't appear in your code. Check out the LESS function reference and its documentation on contrast, it has an example on how to use contrast correctly:

    Example:

contrast(#aaaaaa)
contrast(#222222, #101010)
contrast(#222222, #101010, #dddddd)

Output:

#000000 // black
#ffffff // white
#dddddd

    So your code should read:

    color: contrast(@popupBg, black, white, 43%);

    On the other hand, are you sure that @popupBg is defined?

    Check out this jsfiddle for a demo.