Less.js Type isnumber() Function
Last Updated :
06 Oct, 2022
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 basically used to check whether the given argument is of a certain type of not). The function checks whether the provided argument is a numeric value or not, and based on that returns “true” or “false” as the output.
Syntax:
isnumber(value)
Parameters:
- value: It is the value to check. This can be a certain value or a variable that is storing a value.
Example 1: In this example, we have set the width of the p tag by checking whether the value (provided in the function) is a number or not using the isnumber() function and then using if() function we have set the width. Similarly, we have set the border radius of the p tag.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/styles.css">
</head>
<body style="font-family: sans-serif;">
<h1 style="color: green;">GeeksforGeeks</h1>
<h3><b>isnumber() function in Less.js</b></h3>
<p>I am p tag</p>
</body>
</html>
|
styles.less
p {
background-color: rgba(0, 255, 127, 0.2);
width: if(isnumber(100px), 100px, 20%);
border-radius: if(isnumber("hello world"),
"hello world", 5px);
}
|
Syntax: To compile the above LESS code into normal CSS, run the following command
lessc styles.less styles.css
styles.css
p {
background-color: rgba(0, 255, 127, 0.2);
width: 100px;
border-radius: 5px;
}
|
Output: The output of the above code is
output of isnumber() function in Less.js example 1
Example 2: In this example, we have a variable named @border and @width. Now, we apply these variables as border width and width of the p tag, by first checking whether these variables hold numeric values or not using the isnumber() function and the apply the variables as respective values isnumber() function returns true using the if() function or a default value if the function returns false.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/styles.css">
</head>
<body style="font-family: sans-serif;">
<h1 style="color: green;">GeeksforGeeks</h1>
<h3><b>isnumber() function in Less.js</b></h3>
<p>I have a width and border</p>
</body>
</html>
|
styles.less
@border: 2px;
@width: 130px;
p {
border: if(isnumber(@border), @border, 1px) solid coral;
width: if(isnumber(@width), @width, 100px);
}
|
Syntax: To compile the above LESS code into normal CSS, run the following command
lessc styles.less styles.css
styles.css
p {
border: 2px solid coral;
width: 130px;
}
|
Output:
output of isnumber() function in Less.js example 2
Reference: https://lesscss.org/functions/#type-functions-isnumber
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...