Open In App

What is the use of operations in LESS ?

Improve
Improve
Like Article
Like
Save
Share
Report

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:



Last Updated : 08 Nov, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads