Less.js Type isurl() Function

Last Updated : 06 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 uses a dynamic style sheet language. LESS is flexible enough to be utilized by a wide range of browsers. Web browsers can only use CSS if it is developed and refined using a computer language called the CSS pre-processor. It is a CSS language extension as well as offering features like variables, functions, mixins, and operations to aid in creating dynamic CSS while keeping backward compatibility.

In this article, we are going to discuss Type isurl() function, whose function is to determine whether a value given is an URL or not. This function returns a boolean value.

Syntax:

isurl(value)

Parameters:

value: This is the only compulsory parameter for this function. This value is determined whether to be an URL or not. If there is any value defined as url(..) it will always return a “true” value.

Compile LESS code into CSS code.

Example 1: The code below demonstrates the usage and implementation of the Type isurl() 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>Less.js Type isurl() Function</h3> 
      
    <div class="c1"> 
        <p>isurl(url(...))<br>TRUE</p> 
    </div> 
</body> 
  
</html>

style.less

@body-bg-color: #eeeeee; 
@dark: hsl(25, 71%, 8%); 
@light: rgb(253, 255, 146); 
@addr: url(https://www.geeksforgeeks.org/); 
@cond1: boolean(isurl(@addr)); 
  
body { 
    background-color: @body-bg-color; 
} 
  
.c1 { 
    width: 250px; 
    height: 150px; 
    margin: 1rem; 
    background-color: if(@cond1, @dark, @light); 
} 
  
p { 
    padding: 50px 0px 0px 45px; 
    color: if(@cond1, @light, @dark); 
}

Syntax: To compile the above LESS code to CSS code, run the following command.

lessc style.less style.css

The CSS output of the above Less file was compiled into the following file.

style.css

body { 
    background-color: #eeeeee; 
} 
  
.c1 { 
    width: 250px; 
    height: 150px; 
    margin: 1rem; 
    background-color: hsl(25, 71%, 8%); 
} 
  
p { 
    padding: 50px 0px 0px 45px; 
    color: #fdff92; 
}

Output:

Example 2: The code below demonstrates the usage and implementation of the Type isurl() function and every value enclosed in url(..) is actually a URL.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" 
        type="text/css" href="style.css" /> 
</head> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
      
    <h3>Less.js Type isurl() Function</h3> 
      
    <div class="c1"> 
        <p>isurl(url(...))<br>TRUE</p> 
    </div> 
</body> 
  
</html>

style.less

@body-bg-color: #eeeeee; 
@dark: hsl(25, 71%, 8%); 
@light: rgb(253, 255, 146); 
@addr: url(@light); 
@cond1: boolean(isurl(@light)); 
@cond2: boolean(isurl(@addr)); 
  
body { 
    background-color: @body-bg-color; 
} 
  
.c1 { 
    width: 250px; 
    height: 150px; 
    margin: 1rem; 
    background-color: if(@cond1, @dark, @light); 
} 
  
p { 
    padding: 50px 0px 0px 45px; 
    color: if(@cond2, @dark, @light); 
}

Syntax: To compile the above LESS code to CSS code, run the following command.

lessc style.less style.css

The CSS output of the above Less file was compiled:

style.css

body { 
    background-color: #eeeeee; 
} 
  
.c1 { 
    width: 250px; 
    height: 150px; 
    margin: 1rem; 
    background-color: #fdff92; 
} 
  
p { 
    padding: 50px 0px 0px 45px; 
    color: hsl(25, 71%, 8%); 
}