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 function) is of a particular type (like string, number, pixel, etc) or not. And based on that it returns True/False value. For instance, suppose you want to check whether the object is a string or a number, or has a particular unit or not, or maybe a variable is defined or not, then you can do all that using Type Functions.

Type Functions in Less.js: There are 11 functions provided by Less.js that come in the category of Type Functions and they are as follows:

• isnumber: Used to check whether the given argument (can be some value or a variable) is a number or not and based on that returns True/False.
• isstring: Used to check whether the given argument (can be some value or a variable) is a string or not and based on that returns True/False.
• iscolor: Used to check whether the given argument (can be some value or a variable) is a color or not and based on that returns True/False.
• iskeyword: Used to check whether the given argument (can be some value or a variable) is a keyword or not and based on that returns True/False.
• isurl: Used to check whether the given argument (can be some value or a variable) is a URL or not and based on that returns True/False.
• ispixel: Used to check whether the given argument (can be some value or a variable) is a pixel value or not and based on that returns True/False.
• isem: Used to check whether the given argument (can be some value or a variable) is an em value or not and based on that returns True/False.
• ispercentage: Used to check whether the given argument (can be some value or a variable) is a percentage or not and based on that returns True/False.
• isunit: Used to check whether the given argument (can be some value or a variable) has the given unit (2nd argument) or not and based on that returns True/False.
• isdefined: Used to check whether the given argument (that is a variable) is defined or not and based on that returns True/False.
• isruleset: Used to check whether the given argument (that is a variable) is a ruleset or not and based on that returns True/False.

Note: only “isdefined” and “isruleset” functions take only a variable as their argument. Rest all the functions can be either provided as a variable or direct value as the argument.

Syntax: The syntax of all the Type Functions is as follows:

isnumber(argument)
isstring(argument)
iscolor(argument)
iskeyword(argument)
isurl(argument)
ispixel(argument)
isem(argument)
ispercentage(argument)
isunit(argument, unit)
isdefined(variable)
isruleset(variable)

Parameter value:

• argument: any value/variable given to the function. Example: 13, “GeeksForGeeks”, 10rem, @name (a variable) etc.
• unit : Specifies which unit to check for in the given argument. Optionally unit can be quoted as well. Example : px, em, rem, “%” etc .
• variable : A variable that is passed as the argument to the given function. Example: @name, @myRules, etc.

Example 1: In this example, we have made 2 variables namely “@primary” which is having a color value that is “springgreen” and the variable “@darkmode” which is having the value of “true” as the function “isnumber” returns True as the argument given to it, that is “13”, is a numeric value. Then based on the value of the “@darkmode” variable, the background color of the body becomes black and the text color of the body becomes white. Then in the same body tag, “sans-serif” is defined as the value of the font family as the variable “@fontFamily” is not defined by us anywhere in the code and hence “isdefined” function returns False and the value “sans-serif” is set to be font family. Finally, the text color of the h1 tag is set to be “springgreen” as “@primary” holds a color value, and hence the “iscolor” function returns True for it, and hence the value of “@primary” is set to be the text color of h1 tag.

styles.less

@primary: springgreen;
@darkmode: isnumber(13);

body {
    background-color: if( @darkmode, black, white );
    color: if( @darkmode, white, black );
    font-family: if( isdefined( @fontFamily ), @fontFamily, sans-serif );
}

h1 {
    color: if( iscolor(@primary), @primary, blue ) ;
}

index.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>Type Functions in Less.js</title>
    <link rel="stylesheet" href="/styles.css">
</head>
<body>
    <h1>GeeksforGeeks</h1>
    <h3>Type Functions in Less.js</h3>
</body>
</html>

Now, to compile the LESS code to normal CSS, run the following command in the terminal:

lessc styles.less styles.css

styles.css

body {
    background-color: black;
    color: white;
    font-family: sans-serif;
}
h1 {
    color: springgreen;
}

Output:

Example 2: In this example, the width of the div becomes “200px” as the variable “@width” holds a percentage value and hence the function “ispixel” returns False. Also, the border color of the border applied to the div tag becomes “black” as the variable “@bcolor” is not defined. The font size of h1 tag becomes “3rem” as the function “isunit” returns True as the variable “@fontLG” holds a rem value and that’s the unit for which we checked the variable. Finally, the font size of h3 tag becomes equal to “@fontMD” which is “2rem” as the variable holds a numeric value and the function “isnumber” returns True for that.

styles.less

@width: 50%;
@fontSM: 1rem;
@fontMD: 2rem;
@fontLG: 3rem;

div{
    width: if( ispixel(@width), @width, 200px);
    border: 1px solid if( isdefined(@bcolor), @bcolor, black );
}

h1{
    font-size: if( isunit( @fontLG, rem ), @fontLG, 5rem );
    color: springgreen;
}

h3{
    font-size: if( isnumber(@fontMD), @fontMD, 1.5rem );
}

index.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>Type Functions in Less.js</title>
    <link rel="stylesheet" href="/styles.css">
</head>
<body>
    <div>
        <h1>GeeksforGeeks</h1>
        <h3>Type Functions in Less.js</h3>
    </div>
</body>
</html>

To compile the LESS file to a normal CSS file, run the following command in your terminal:

lessc styles.less styles.css

styles.css

div {
    width: 200px;
    border: 1px solid black;
}
h1 {
    font-size: 3rem;
    color: springgreen;
}
h3 {
    font-size: 2rem;
}

Output:

Reference: https://lesscss.org/functions/#type-functions