Less.js Type isurl() Function
Last Updated :
28 Apr, 2025
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>
@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>
@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%);
}
Output:
Reference: https://lesscss.org/functions/#type-functions-isurl
Similar Reads
Less.js Type isnumber() Function In this article, we are going to take a look on isnumber() function in Less.js. Less (Leaner Style Sheets) is an extension to normal CSS which is basically used to enhance the abilities of regular CSS code and provide it superpowers. The isnumber() function is a Type Function in Less.js (which is ba
3 min read
Less.js Type isem() Function Less (Leaner style sheet) is an extension to normal CSS which is basically used to enhance the abilities of normal CSS code and provide it superpowers. isem() function is a Type Function in Less.js (which is basically used to check the type of the given parameter). isem() function is used to find ou
3 min read
Less.js Type isunit() Function Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. Because CSS uses a dynamic style sheet language, it is more beneficial. Due to LESS adaptability, it may be used by numerous different browsers. CSS must be create
2 min read
Less.js Type Functions In this article, we will see the Type Functions provided by Less.js. Less.js (Leaner Style Sheets) is an extension to normal CSS which basically enhances the abilities of normal CSS and gives it superpowers. Basically, Type Functions are used to check whether a particular argument (provided to the f
6 min read
Less.js Type isruleset() Function Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. Given that CSS is a dynamic style sheet language, it is preferable. Since LESS is adaptable, it can be used by many different browsers. Only CSS that has been crea
3 min read
Less.js Type iscolor() Function Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. Because CSS uses a dynamic style sheet language, it is more beneficial. Because of LESS adaptability, it may be used by numerous different browsers. CSS must be cr
3 min read