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>
@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 */
@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;
}
Output:
Reference: https://lesscss.org/functions/#logical-functions-boolean
Similar Reads
Less.js Logical Functions 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 functi
3 min read
p5.js boolean() function The boolean() function in p5.js is used to convert the given string and number value into its boolean representation. Syntax: boolean(Value) Parameters: This function accepts single parameter Value which are to be converted into its boolean representation. This value might be integer, float, string,
3 min read
Less.js Color Blending negation() Function Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. Because it uses a dynamic style sheet language, CSS is more useful. LESS is adaptable enough to function in a variety of browsers. In order for web browsers to use
4 min read
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
Tensorflow.js tf.less() Function Tensorflow.js is an open-source library developed by Google for running machine learning models and deep learning neural networks in the browser or node environment. The tf.less() function is used to return the tensor of Boolean values for the two specified tensor values i.e. it returns true if the
2 min read
Tensorflow.js tf.logicalOr() Function Tensorflow.js is an open-source library developed by Google for running machine learning models and deep learning neural networks in the browser or node environment. The tf.logicalOr() function is used to return a tensor of Boolean values for the result of element-wise OR operation on the two specif
1 min read