Less.js jsList length() Function

Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is better since CSS makes use of a dynamic style sheet language. LESS is flexible enough to work in a wide range of browsers. To create and improve CSS so that web browsers can use it, a computer language known as the CSS pre-processor is used. In addition, it is a CSS language extension that provides tools like variables, functions, mixins, and operations to help with the development of dynamic CSS while preserving backward compatibility.

In our article, we will learn the jsList length() function, whose job is to generate a list from specified starting and ending values with specified gad in between.

Syntax:

length(list)

 

Parameters:

• list: This parameter is used to specify the list on which operations will be done.

Example 1: The code below demonstrates the usage and implementation of the jsList length() function.

styles.less:

Now, to compile the above LESS code to CSS code, run the following command:

lessc styles.less styles.css

The compiled CSS file comes to be: 

styles.css: 

Output:

👁 Image

Example 2: The code below demonstrates the usage and implementation of the jsList length() function with the jsList extract() function,  if() and boolean logical functions.

styles.less: 

Now, to compile the above LESS code to CSS code, run the following command:

lessc styles.less styles.css

The compiled CSS file comes to be: 

styles.css: 

Output:

👁 Image

Reference: https://lesscss.org/functions/#list-functions-length