Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. Since CSS is a dynamic style sheet language, it is preferred. Because LESS is adaptable, it can be used by a variety of browsers. Only CSS that has been created and processed using the CSS pre-processor, a computer language, can be used by web browsers. In addition to providing capabilities like variables, functions, mixins, and operations to help create dynamic CSS while maintaining backward compatibility, it is a CSS language extension.
The built-in CSS function calc() is used to carry out computations based on CSS properties. The CSS calc() method performs calculations using either the values of its parent element or the values entered by the user.
For more CSS compatibility, in less.js the calc function is disabled for evaluating the math expressions and when they are described inside nested functions are evaluated. But if we want the calc function to not change anything and keep it as it is then we can add the expression inside "" quotes and put a ~ before it so that after compilation, the expression will be the same as it is.
Syntax:
calc(expression)
Parameters:
- expression: The is a compulsory parameter which is the main Math expression.
Compile LESS code into CSS code.
Example 1: The example below practically illustrates the exception in the calc() function and how the nested functions are solved.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="style.css"/>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3><b>Less.js calc() Exception</b></h3>
<div class="c1">
<p>@v: 5rem;<br>
height: @h: @v * 2;<br>
width: @w: calc((@v * 3) + @v);</p>
</div>
</body>
</html>
styles.less
CSS
@body-bg-color: #eeeeee;
@dark: hsl(25, 71%, 8%);
@light: rgb(253, 255, 146);
@v: 5rem;
@h: @v * 2;
@w: calc((@v * 3) + @v);
body {
background-color: @body-bg-color;
}
.c1 {
width: @w;
height: @h;
margin: 1rem;
background-color: @dark;
padding: 40px 0px 0px 55px;
}
p {
color: @light;
}
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: The CSS output of the above Less file was compiled.
CSS
body {
background-color: #eeeeee;
}
.c1 {
width: calc((5rem * 3) + 5rem);
height: 10rem;
margin: 1rem;
background-color: hsl(25, 71%, 8%);
padding: 40px 0px 0px 55px;
}
p {
color: #fdff92;
}
Output:
Example 2: The example below practically illustrates the exception in calc() function and how using the ~ with string form will let is be as it is.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="style.css"/>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3><b>Less.js calc() Exception</b></h3>
<div class="c1">
<p>width: ~ "calc((@v * 3) + @v)"<br>
width: calc((5rem * 3) + 5rem)</p>
</div>
</body>
</html>
styles.less
CSS
@body-bg-color: #eeeeee;
@dark: hsl(25, 71%, 8%);
@light: rgb(253, 255, 146);
@v: 5rem;
@h: @v * 2;
body {
background-color: @body-bg-color;
}
.c1 {
width: ~ "calc((5rem * 3) + 5rem)";
height: @h;
margin: 1rem;
background-color: @light;
padding: 60px 0px 0px 55px;
}
p {
color: @dark;
}
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: The CSS output of the above Less file was compiled.
CSS
body {
background-color: #eeeeee;
}
.c1 {
width: calc((5rem * 3) + 5rem);
height: 10rem;
margin: 1rem;
background-color: #fdff92;
padding: 60px 0px 0px 55px;
}
p {
color: hsl(25, 71%, 8%);
}
Output:
Reference: https://lesscss.org/#operations-calc-exception
Similar Reads
Less.js Math ceil() Function
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is an extension to normal CSS which basically enhances the abilities of normal CSS and gives superpowers to it. LESS.js provides the built-in Math function that
3 min read
Less.js Math acos() Function
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. Because CSS is a dynamic style sheet language, it was chosen. Because LESS is adaptable, it works with a wide range of browsers. Only CSS that has been written in
3 min read
Less.js Installation
LESS (Leaner Style Sheets) 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 enhances the working power of CSS. LESS supports cross-browser compatibility. CSS pre-processor is a s
4 min read
Less.js Extend
LESS.js is one of the most popular CSS preprocessor languages because of its many features like mixins, imports, variables and, so on, which help to reduce the complexity of CSS code. One such important and useful feature of LESS is the @extend directive. In this article, we will see the basic usage
3 min read
Less.js Misc color() Function
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. Since CSS is a dynamic style sheet language, it is preferred. LESS is adaptable, so it works with a wide range of browsers. Only CSS that has been created and proc
3 min read
Less.js Math abs() Function
Less (Leaner Style Sheets) is an extension to normal CSS code which is basically used to enhance the abilities of normal CSS code and provide it superpowers. The abs() function is a type of Math function in Less.js (which is basically used to perform mathematical operations). The abs() function is u
2 min read
Less.js Math cos() Function
Less (Leaner style sheets) is an extension to normal CSS which is basically used to enhance the abilities of normal CSS and give it superpowers. The cos() function is a Math Function in Less.js which is used to find out the cosine value of the argument provided and returns the output. In this articl
2 min read
Less.js Color Channel red() Function
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. CSS is more functional because of this dynamic style sheet language. Cross-browser interoperability is a feature of LESS. A computer language known as the CSS pre-
3 min read
Less.js Color Channel hue() Function
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 makes CSS more powerful. LESS provides cross-browser compatibility. A programming language called CSS pre-processor is us
3 min read
Less.js Misc default() Function
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. Since CSS is a dynamic style sheet language, it is preferred. LESS is adaptable, so it works with a wide range of browsers. Only CSS that has been created and proc
3 min read