Less.js jsList extract() 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 extract() function, whose job is to extract a value from a given list from a specified index.

Syntax:

extract(list, index)

Parameters:

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

Compile LESS code into CSS code.

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

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" type="text/css" 
          href="style.css"/> 
 </head> 
  
<body> 
    <h1 style="color:green">w3wiki</h1>   
    <h3><b>Less.js jsList extract() Function</b></h3> 
    <div class="c1">   
        <p> 
            <strong>extract(@list, 3)<br>rgb(120, 77, 21)</strong> 
        </p> 
    </div> 
</body> 
</html>

styles.less:

CSS

@body-bg-color: #eeeeee; 
@list: 200px, rgb(0, 128, 0), rgb(120, 77, 21), 250px; 
body { 
    background-color: @body-bg-color; 
} 
.c1 { 
    width: extract(@list, 4); 
    height: extract(@list, 1); 
    background-color: extract(@list, 3); 
    margin: 1rem; 
    margin-left: extract(@list, 4); 
} 
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:

CSS

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

Output:

Example 2: The code below demonstrates the usage and implementation of the jsList extract() 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">w3wiki</h1>   
    <h3><b>Less.js jsList extract() Function</b></h3> 
    <div class="c1">   
        <p> 
            <strong>extract(@list, 3)<br>margin-left: 150px</strong> 
        </p> 
    </div> 
</body> 
  
</html>

styles.less:

CSS

@body-bg-color: #eeeeee; 
@list: 200px, green, 150px, 250px; 
@cond: boolean(ispixel(extract(@list, 1))); 
body { 
    background-color: @body-bg-color; 
} 
.c1 { 
    width: extract(@list, 4); 
    height: extract(@list, 1); 
    background-color: if(@cond, extract(@list, 2), #ffffff); 
    margin: 1rem; 
    margin-left: extract(@list, 3); 
} 
p{ 
    padding: 70px 0 0 40px; 
}

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:

CSS

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

Output:

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

HTML

CSS

CSS

HTML

CSS

CSS

Contact Us