Open In App

Less.js Logical Functions

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will see the Logical Functions in LESS.js. Logical functions are a way to perform operations and evaluate code based on logical conditions. Basically, these functions provide the power of “if-else” conditions in CSS and help us do things based on logic. There are 2 logical functions provided by Less.js which are as follows:

If-function: This function checks for the given conditions to be True/False and based on that it returns one of the values provided to it as output.

Syntax:

if(condition, value1, value2)

Parameter values:

  • condition: The first parameter is the condition that needs to be evaluated.
  • value1: value1 is returned if the condition is true .
  • value2: value2 is returned if the condition is false.

Boolean function: This function is given a condition and based on that it returns True/False as the output. Mainly you can use this function to store the output of a condition in a variable and then can use it in some “if” function later whenever required.

Syntax:

boolean(condition);

Parameter:

  • condition: It has only one parameter which is the condition parameter.

Note: You can use =, <, >, not( condition), and, or operators along with any other function of Less.js which returns true while forming the condition.

Example 1: The below code stores a boolean value (dummy condition used) in the variable named “@darkmode” which is evaluated to “True and based on that the body gets a background color of black and text color of white. Also, the color of text inside the div is set to green as the condition given in that case is evaluated to “False“.

index.html




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
    "width=device-width, initial-scale=1.0">
    <title>Logical Functions in Less.js</title>
    <link rel="stylesheet" href="/styles.css">
</head>
  
<body>
    <div>
        <h1>GeeksForGeeks</h1>
    </div>
    <h3>Logical Functions in Less.js</h3>
</body>
</html>


styles.less




@darkmode: boolean( not(0>1) );
  
body{
  background-color: if( @darkmode, black, white );
  color: if( @darkmode, white, black );
}
  
div{
  color: if( 1>2, blue, green );
}


To compile the above code to normal CSS, run the following command in the terminal:

lessc styles.less styles.css

styles.css




body {
  background-color: black;
  color: white;
}
div {
  color: green;
}


Output:

output of logical functions in less.js example 1

 

Example 2: In this example, “@fontFamily” is a string, and hence the condition given is if the function of the body tag is evaluated to True and its font family is set to be “sans-serif“. Similarly, the condition in the if-function of the <h1. tag is set to be true as the variable “@primary” is holding the value which is a color and “1>0” is also True, and hence the if-function returns true and the color of the <h1> tag becomes green. Finally, the condition given in if the function used in the <h3> tag is evaluated to be False as “2rem” is not a pixel value and as a result, the font size of the h3 tag becomes 20px.

index.html




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
    "width=device-width, initial-scale=1.0">
    <title>Logical Functions in Less.js</title>
    <link rel="stylesheet" href="/styles.css">
</head>
  
<body>
    <div>
        <h1>GeeksForGeeks</h1>
    </div>
    <h3>Logical Functions in Less.js</h3>
</body>
</html>


styles.less




@fontFamily: "sans-serif";
@primary: green;
  
body{
  font-family: if( isstring(@fontFamily),  sans-serif, serif);
}
  
h1{
  color: if( (iscolor(@primary) and 1>0), @primary, blue );
}
  
h3{
  font-size: if( ispixel(2rem), 2rem, 20px );
}


To compile the above code to normal CSS, run the following command in the terminal:

lessc styles.less styles.css

styles.css




body {
  font-family: sans-serif;
}
h1 {
  color: green;
}
h3 {
  font-size: 20px;
}


Output:

output of logical functions in less.js example 2

 

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



Last Updated : 05 Sep, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads