Using the built-in functions of Less

Less has many built-in functions that can be leveraged for others, transforming colors, manipulating strings, or even performing mathematical operations.

Getting ready

Create a valid HTML document named index.html and an empty project.less file. Make sure your index.html HTML5 document has the following lines of code in its head section:

  <link rel="stylesheet/less" type="text/css" href="project.less">
  <script src="less.js" type="text/javascript"></script>

How to do it…

This recipe will show you how to use the darken() and contrast() built-in functions. Perform the following steps:

Start this recipe by creating a simple HTML structure in the index.html file, shown as follows:

<div class="item color1">Text</div>
<div class="item color2">Text</div>
<div class="item color3">Text</div>
<div class="item color4">Text</div>
<div class="item color5">Text</div>

After creating the HTML page, add the following Less code to the project.less file:

@start-color: white;
.color1 {
  background-color: @start-color; 
  color: contrast(@start-color);
}
.color2 {
  @color: darken(@start-color, 25%);
  background-color: @color; 
  color: contrast(@color);
}
.color3 {
  @color: darken(@start-color, 50%);
  background-color: @color; 
  color: contrast(@color);
}
.color4 {
  @color: darken(@start-color, 75%);
  background-color: @color; 
  color: contrast(@color);
}
.color5 {
  @color: darken(@start-color, 100%);
  background-color: @color; 
  color: contrast(@color);
}

Now, open the index.html file in the browser and you will see the following output:

How it works…

Both the darken() and contrast() functions return a color. The darken() function returns a darker variant of the input color, and contrast() returns black or white, based on the highest contrast with the input color.

The darken() function ensures that a color is readable against a background, which will be useful to meet web accessibility requirements too. The contrast() function compares the luma value (also called luminosity that represents the brightness in an image) of a color and not the lightness.

There's more…

The built-in functions of Less can be grouped based on their input type. Refer to the following functions:

The string functions can be used to manipulate strings. The replace function, which replaces the text in a string, is an example of a string function.
The type functions, which include functions such as isnumber() and iscolor(), return a Boolean value. The iscolor() function returns true for values such as #ff0 or red and false for all other kinds of input types.
The list functions operate on values. Both comma and space-separated lists are supported. The only two functions in the group are extract() and length(). The group of mathematical functions contain functions for all kinds of mathematical operations, such as sin(), round(), and pow().
Finally, there are four groups of functions that can be used with colors:
- Color definition functions
- Color channel functions
- Color operations functions
- Color blending functions

You will also have to note that the example code in this recipe did not meet the DRY principle of software programming. When using guards, as described in the Building loops leveraging mixins and guards recipe in Chapter 6, Advanced Less coding, you can solve this issue of code repetition. You can rewrite the Less code to the following code, which uses a guard:

.shade(@color,@number) when (@number>0) { 
.shade(@color,@number - 1); 
@darkcolor: darken(@color,(25% * (@number - 1))); 
.color@{number} { 
  background-color: @darkcolor; 
  color: contrast(@darkcolor); 
  } 
} 
.shade(white,5);

LESS WEB DEVELOPMENT COOKBOOK

By : Jobsen, Meyghani

LESS WEB DEVELOPMENT COOKBOOK

By: Jobsen, Meyghani

Overview of this book

Using the built-in functions of Less

Getting ready

How to do it…

How it works…

There's more…

See also

LESS WEB DEVELOPMENT COOKBOOK

By : Jobsen, Meyghani

LESS WEB DEVELOPMENT COOKBOOK

By: Jobsen, Meyghani

Overview of this book

Using the built-in functions of Less

Getting ready

How to do it…

How it works…

There's more…

See also

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access