Less.js Logical boolean() Function

Last Updated : 28 Sep, 2022

Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is a dynamic style sheet language that improves CSS’s functionality. Cross-browser interoperability is supported by LESS. A scripting language known as CSS pre-processor is used to enhance CSS and compile it into standard CSS syntax for use by web browsers. Additionally, it is a language extension for CSS that supports backward compatibility and offers functionality like variables, functions, mixins, and operations that let us create dynamic CSS.

Less.js Logical boolean() Function receives a condition and, depending on it, outputs True or False. Generally, you can use this method to save a condition’s result in a variable so that you can utilize it later, as needed, in an “if” function.

Syntax:

boolean(condition);

Parameters:

condition: This is the parameter that is compulsory for the boolean function, this condition is evaluated and the result is returned.

Example 1: The code below demonstrates how we can use the boolean Logical function in Less.js and we can pair it with another LESS function to produce an output.

index.html

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" 
          type="text/css" 
          href="style.css"/> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <h3>Less.js Logical boolean() Function</h3> 
</body> 
  
</html>

styles.less

@body-bg-color: #eeeeee; 
@text-color: rgb(70, 172, 121); 
@button-bg-color: boolean(color(@body-bg-color) = #a7a7a7); 
  
body { 
    background: @body-bg-color; 
} 
  
h3{ 
    color: if(@button-bg-color, grey, green); 
}

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:

style.css

body { 
      background: #eeeeee; 
} 
h3 { 
      color: green; 
}

Output:

Example 2: The code below demonstrates how we can use multiple boolean Logical functions in Less.js and we can pair them with various LESS functions to produce an output.

index.html

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" type="text/css" href="style.css"/> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <h3>Less.js Logical boolean() Function</h3> 
    <div class="container"> 
    </div> 
</body> 
  
</html>

styles.less

/* styles.less */
@body-bg-color: #eeeeee; 
@text-color: rgb(71, 167, 119); 
@container-bg: rgb(220, 43, 55); 
@cond1: boolean(luma(@body-bg-color) > 50%); 
@cond2: boolean(luma(@container-bg) > 50%); 
  
body { 
    background: @body-bg-color; 
} 
  
h3{ 
    color: if(@cond2, grey, green); 
} 
.container{ 
    width: 15rem; 
    height: 9rem; 
    background-color: if(@cond1, @container-bg, @button-bg-color); 
}

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:

style.css

body { 
      background: #eeeeee; 
} 
h3 { 
      color: green; 
} 
.container { 
      width: 15rem; 
      height: 9rem; 
      background-color: #dc2b37; 
}