Less.js Type isem() Function
Last Updated :
16 Oct, 2022
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 out whether the given argument is an em value or not. Basically, the unit of the given argument is em or not. Based on that, it returns true/false.
For example, running isem value on 13px will result in a “false” but if the value is 13em then the result will be “true”.
Parameter:
- value: Any value or a variable containing a value that you want to get evaluated. For example: 13px, 13em, @fontsize etc
Syntax:
isem(value)
Example 1: In this example, we have checked whether the variable, @size, is an em value or not using isem() function. Then using the if() function of less.js, we have set the font size of the body and as the variable @size is an em value, hence we have applied @size to the body.
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>GeeksforGeeks | isem Function in Less.js</title>
<link rel="stylesheet" href="/styles.css">
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<h3>isem Function in Less.js</h3>
<p>I am a paragraph tag</p>
<p>I am having font size equal to @size</p>
</body>
</html>
|
styles.less: The LESS code is as follows:
CSS
// styles.less
@size: 1.3em;
body{
font-size: if( isem(@size), @size, 1em );
}
|
Syntax: To compile the above LESS code into normal CSS code, run the following command:
lessc styles.less styles.css
styles.css: The output CSS file looks like the following.
CSS
body {
font-size: 1.3em;
}
|
Output:
Example 2: In this example, we have set the width of the container by checking through isem() function whether the variable @width is an em value or not. As the variable @width is not an em value, the if function used returns 15em as the output.
We apply the border width using the isem() function on @borderWidth and the if function to return the @borderWidth as it is an em value.
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>GeeksforGeeks | isem Function in Less.js</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1 style="color: green;">GeeksforGeeks</h1>
<h3>isem Function in Less.js</h3>
</div>
</body>
</html>
|
styles.less: The LESS code is as follows.
CSS
// styles.less
@width: 300px;
@borderWidth: 0.2em;
.container{
width: if( isem(@width), @width, 15em );
border: if( isem(@borderWidth), @borderWidth, 1em ) solid black;
}
|
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: The output CSS file looks like the following.
CSS
.container {
width: 15em;
border: 0.2em solid black;
}
|
Output:
Reference: https://lesscss.org/functions/#type-functions-isem
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...