In this recipe, we'll make use of the contrib-less (0.11.4)
plugin to define custom functions that can be used in our LESS style sheets.
For our example, we'll create a custom function called halfDarken
, which will darken any color provided to it by 50 percent. It will make use of the LESS library's built-in darken
function.
In this example, we'll work with the basic project structure that we created in the Compiling LESS to CSS recipe of this chapter. Be sure to refer to it if you are not yet familiar with its contents.
The following steps will take us through altering our configuration to define a custom function, and altering our LESS style sheet to use it:
First, we'll alter the configuration of our
less
task by adding thecustomFunctions
option and defining a stub for thehalfDarker
function:less: { styles: { options: { customFunctions: { halfDarken: function (less, color) { return color; ...