Less.js jsList range() Function

Last Updated : 25 Oct, 2022

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 range() Function, whose job is to generate a list from specified starting and ending values with specified gad in between.

Syntax:

range(start, end, step)

Parameters:

start: This parameter is used to specify the index from which the list will start.
end: This parameter is used to specify the index at which the list will end.
step: This parameter specifies how my interval to maintain between the elements of the list.

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

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" type="text/css" 
          href="style.css" /> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <h3><b>Less.js jsList range() Function</b></h3> 
    <div class="c1"> 
        <p> 
            <strong>range(200px, 280px, 20)<br> 
              (200px 220px 240px 260px 280px) 
            </strong> 
        </p> 
    </div> 
</body> 
  
</html>

styles.less:

CSS

@body-bg-color: #eeeeee; 
@list: range(200px, 280px, 20); 
@color: green; 
body { 
    background-color: @body-bg-color; 
} 
.c1 { 
    width: extract(@list, 4) * 1.5; 
    height: extract(@list, 1); 
    background-color: @color; 
    margin: 1rem; 
    margin-left: extract(@list, 1); 
} 
p { 
    padding: 70px 0 0 50px; 
    color: #ffffff; 
} 

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: The CSS output of the above Less file was compiled.

CSS

body { 
    background-color: #eeeeee; 
} 
.c1 { 
    width: 390px; 
    height: 200px; 
    background-color: green; 
    margin: 1rem; 
    margin-left: 200px; 
} 
p { 
    padding: 70px 0 0 50px; 
    color: #ffffff; 
} 

Output:

Example 2: The code below demonstrates the usage and implementation of the jsList range() Function with the if() and boolean logical functions.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" type="text/css" 
          href="style.css"/> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1>   
    <h3><b>Less.js jsList range() Function</b></h3> 
    <div class="c1">   
        <p> 
            <strong>boolean(isnumber(extract(@list1, 1)))<br> 
              TRUE 
          </strong> 
        </p> 
    </div> 
</body> 
  
</html>

styles.less:

CSS

@body-bg-color: #eeeeee; 
@list1: range(400px, 500px, 20); 
@list2: range(200px, 300px, 20); 
@cond: boolean(isnumber(extract(@list1, 1))); 
body { 
    background-color: @body-bg-color; 
} 
.c1 { 
    width: extract(@list1, 2); 
    height: extract(@list2, 2); 
    background-color: if(@cond, #deb887, #ffffff); 
    margin: 1rem; 
    margin-left: extract(@list2, 1); 
} 
p{ 
    padding: 70px 0 0 (extract(@list2, 1) * 0.25); 
}

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: The CSS output of the above Less file was compiled.

CSS

body { 
    background-color: #eeeeee; 
} 
.c1 { 
    width: 420px; 
    height: 220px; 
    background-color: #deb887; 
    margin: 1rem; 
    margin-left: 200px; 
} 
p { 
    padding: 70px 0 0 50px; 
} 