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;
}
h 3 {
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 ;
}
h 3 {
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
@body-bg- color : #eeeeee ;
@text- color : rgb ( 71 , 167 , 119 );
@container-bg: rgb ( 220 , 43 , 55 );
@cond 1: boolean(luma(@body-bg-color) > 50% );
@cond 2: boolean(luma(@container-bg) > 50% );
body {
background : @body-bg-color;
}
h 3 {
color : if(@cond 2 , grey, green );
}
.container{
width : 15 rem;
height : 9 rem;
background-color : if(@cond 1 , @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 ;
}
h 3 {
color : green ;
}
.container {
width : 15 rem;
height : 9 rem;
background-color : #dc2b37 ;
}
|
Output:
Reference: https://lesscss.org/functions/#logical-functions-boolean
Share your thoughts in the comments
Please Login to comment...