Skip to content
Related Articles

Related Articles

What is the use of operations in LESS ?

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 08 Nov, 2021

Similar to many programming languages, LESS also provides arithmetic operations like addition (+), subtraction (-), division (/) and multiplication (*). These operators can make our work a lot easier when used properly. It is as simple as doing basic mathematics in the stylesheets and can be applied to any variables, numbers, and even colors. Using these operators, our work will get reduced and becomes really quick.

Let’s better understand this with the below example.

Example: Firstly we’ll create a LESS file (with extension .less) with the below code.

demo.less




@var : 10px;
.class1 {
    font-size: @var * 8;
    color: red;
}
.class2 {
    font-size: @var + 20;
    color: green;
}


Using the following command, we can compile the demo.less into CSS.

lessc demo.less demo.css

CSS Output: We have got a CSS file equivalent to the following.

demo.less




.class1 {
  font-size: 80px;
  color: red;
}
  
.class2 {
  font-size: 30px;
  color: green;
}


Now let’s create an HTML file to try out this CSS code.

index.html




<!DOCTYPE html>
<html>
  <head>
    <title>Operations in LESS</title>
    <link rel="stylesheet" 
          type="text/css" href="demo.css" />
  </head>
  <body>
    <p class="class1">GeeksforGeeks</p>
  
    <p class="class2">Welcome to GFG</p>
  
  </body>
</html>


Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!