What is the use of operations in LESS?

LESS (Leaner Style Sheets) is a dynamic stylesheet language that extends CSS (Cascading Style Sheets) with additional functionality. It provides a variety of operations to perform mathematical calculations on CSS values, which allows developers to create more flexible and dynamic styles.

This tutorial will teach us how these operations are in LESS and create styles that adapt to different screen sizes and devices.

Different Operations in LESS

Here are some of the operations that can be used in LESS −

Addition (+) and Subtraction (-) − These operations allow us to add or subtract values from each other.

Multiplication (*) and Division (/) − These operations allow us to multiply or divide values.

Calc() Exception

The calc() function in CSS allows us to perform mathematical operations on values that can be used in CSS. This function can be used to calculate a width or height of an element based on other values, which can be very useful in responsive design.

One important thing to note is that calc() does not evaluate math expressions by default. This is done for CSS compatibility reasons, as some browsers may not support certain math functions. However, calc() will evaluate variables and math in nested functions, allowing users to perform more complex calculations.

For example, suppose we have a variable @width. We can use this variable in a calc() function to calculate the width of an element as follows:

@width:50vh;
h1 {
   width: calc(50% + (@width - 20px));
}

The resulting value will be calc(50% + (50vh - 20px)).

Example

In this example, we have defined a @base-size variable and then used the Addition and Subtraction operations to create two new variables, @large-size and @small-size. The @large-size variable adds 4px to the base size, while the @small-size variable subtracts 2px from the base size. We then use these variables to set the font size of our h1 and p elements.

@base-size: 16px;
@large-size: @base-size + 4px; // Adds 4px to base size
@small-size: @base-size - 2px; // Subtracts 2px from base size
 
h1 {
   font-size: @large-size;
}
 
p {
   font-size: @small-size;
}

Output

h1 {
   font-size: 20px;
}
p {
   font-size: 14px;
}

Example

In this example, we're using variables to set the base width of a layout and the number of columns. We then calculate the width of each column by dividing the base width by the column count. Finally, in a media query, we set the width of a half-width column to 6 times the column width, which is calculated using multiplication.

@base-width: 960px;
@column-count: 12;
@column-width: @base-width / @column-count; 
@media (min-width: 768px) {
   .col-md-6 {
      width: @column-width * 6; 
   }
}

Output

@media (min-width: 768px) {
   .col-md-6 {
      width: 960px / 12 * 6;
   }
}

Example

In this example, we first change the math set to always and then define variables for the height of the header and nav elements. We use the calc() function to calculate the height of the main element using the variables defined earlier.

Next, we reset the math setting to default and defined new variables for the width of a box and its padding. We use math operations to calculate the box’s width and set its width accordingly.

By changing the math set to always, we can perform complex mathematical operations without reducing them to their simplest form, achieving greater control over our styles.

// Set math setting to always
@math: always;
 
// Define variables
@header-height: 80px;
@nav-height: 50px;
 
// Set height of the header
header {
   height: @header-height;
} 
// Set height of the nav
nav {
   height: @nav-height;
} 
// Calculate the height of the main using calc()
main {
   height: calc(100% - (@header-height + @nav-height));
} 
// Reset math setting to default
@math: default; 

// Define new variables
@box-width: 300px;
@padding: 20px; 

// Calculate the width of the box using math operations
.box {
   width: @box-width + @padding;
}

Output

header {
   height: 80px;
}
nav {
   height: 50px;
}
main {
   height: calc(100% - (80px + 50px));
}
.box {
   width: 320px;
}

Example

In this example, we define two colors (@color-1 and @color-2) and perform different arithmetic operations on them using LESS. We add the two colors together, subtract the second color from the first, multiply the first color by 50%, and mix the two colors with a 50% weight for each.

Users can observe in the output that each operation results in a new color that can be used as a value for a CSS property.

// Define two colors
@color-1: #ff0000;
@color-2: #00ff00;
 
// Add the two colors together
.add-colors {
   background-color: @color-1 + @color-2;
}
 
// Subtract the second color from the first
.subtract-colors {
   background-color: @color-1 - @color-2;
}
 
// Multiply the first color by 50%
.multiply-color {
   background-color: @color-1 * 50%;
}
 
// Mix the two colors with a 50% weight for each
.mix-colors {
   background-color: mix(@color-1, @color-2, 50%);
}

Output

.add-colors {
   background-color: #ffff00;
}
.subtract-colors {
   background-color: #ff0000;
}
.multiply-color {
   background-color: #ff0000;
}
.mix-colors {
   background-color: #808000;
}

Conclusion

Users learned how to use various arithmetic operations in LESS, which includes addition, subtraction, multiplication, and division. They have also learned to perform complex mathematical calculations using the calc() function.

In addition to arithmetic operations on numerical values, users have also learned about arithmetic operations on colors. This involves adding or subtracting color values, such as RGB, HEX, or HSL values.