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
Similar Reads
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 isurl() Function
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
3 min read
Less.js Type ispixel() Function
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
3 min read
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
2 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 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 iskeyword() Function
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 de
3 min read
Less.js Type isdefined() Function
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
2 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
Less.js Type isstring() 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 c
3 min read