How many ways to use LESS ?

What is the use of operations in LESS ?

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:

How many ways to use LESS ?

P

parthmanchanda81

Improve

Article Tags :

Similar Reads

Less.js Color Operation shade() Function

Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. Since CSS uses a dynamic style sheet language, it is superior. LESS is adaptable enough to function in a variety of browsers. Web browsers can only use CSS if it i

Real Life Applications of Arithmetic Operations

Arithmetic operations are basic calculations you do with numbers. They include addition (combining numbers), subtraction (taking one number away from another), multiplication (repeated addition), and division (sharing or grouping numbers). Arithmetic operations are core foundation of mathematics. In

What is JavaScript >>> Operator and how to use it ?

The JavaScript >>> represents the zero-fill right shift operator. It is also called the unsigned right-bit shift operator. It comes under the category of Bitwise operators. Bitwise operators treat operands as 32-bit integer numbers and operate on their binary representation. Zero-fill right

How many ways to use LESS ?

LESS(Leaner Style Sheets) is a popular CSS preprocessor that expands the capabilities of standard CSS. LESS can be used in a variety of ways, depending on your requirements and tastes. It is a dynamic style sheet language that enhances the working power of CSS. LESS supports cross-browser compatibil

Less.js Color Operation mix() Function

Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. Since CSS uses a dynamic style sheet language, it is superior. LESS is adaptable enough to function in a variety of browsers. In order for web browsers to use CSS,

Less Than(<) Comparison Operator in JavaScript

JavaScript Less Than(<) Operator is used to compare two operands and return true if the left operand has a lesser value than the right operator. The values are converted to equal primitive types before conversion If both the values are strings the comparison is done on the basis of their Unicode.