Less.js Type isdefined() Function
Last Updated :
11 Oct, 2022
Less (Leaner Style Sheets) is an extension to normal CSS which basically enhances the abilities of normal CSS code and provides superpowers to it.
In this article, we are going to take a look at the isdefined() function in Less.js.
The isdefined() function is a Type Function in Less.js which is used to find out whether the given argument or the given variable is defined or not. If the given variable is defined then it returns “true” and if the given variable is not defined then it returns “false” as the output.
Parameter:
- variable: A variable that you want to check is defined or not. For example, @myVar, @font, etc.
Syntax:
isdefined(variable)
Example 1: In this example, we have checked whether the variable @font is defined or not using the isdefined() function. If the variable is defined, we apply the @font using the if() function.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Less.js Type isdefined() Function</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Less.js Type isdefined() Function</h3>
</body>
</html>
|
styles.less: The LESS code looks like the following.
CSS
@font: sans-serif;
body {
font-family: if( isdefined(@font), @font, serif );
}
|
Syntax: To compile the above LESS code into normal CSS, run the following command:
lessc styles.less styles.css
styles.css: The output CSS file looks like the following.
CSS
body {
font-family: sans-serif;
}
|
Output:
Example 2: In this example, we have checked whether the variable @size is defined or not. As the variable is not defined, the CSS font-size of the p tag is 15px (using the if function). We have checked for the @color variable and as it exists we have set that color to the h3 tag.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Less.js Type isdefined() Function</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>Less.js Type isdefined() function</h3>
<p>I am p tag</p>
</body>
</html>
|
styles.less: The LESS code is as follows.
CSS
@color: darkgoldenrod;
p {
font-size: if( isdefined(@size), @size, 15px );
}
h3 {
color: if( isdefined(@color), @color, red );
}
|
Syntax: To compile the above LESS code into normal CSS, run the following command.
lessc styles.less styles.css
styles.css:
CSS
p {
font-size: 15px;
}
h3 {
color: darkgoldenrod;
}
|
Output:
Reference: https://lesscss.org/functions/#type-functions-isdefined
Share your thoughts in the comments
Please Login to comment...