What are the uses of operations in LESS?

LESS (Less-Based Style Sheets) is a dynamic style sheet 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 to do these operations in LESS and create styles that adapt to different screen sizes and devices.

Different operations in LESS

The following are some 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 the width or height of an element based on other values, which is very useful in responsive designs.

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

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

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

The result value is calc(50% (50vh - 20px)).

Example

In this example, we define a @base-size variable and then use 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 the 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 use variables to set the layout's base width and number of columns. We then calculate the width of each column by dividing the base width by the number of columns. Finally, in the media query, we set the width of the half-width column to 6 times the column width, calculated by 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 setting to Always and then define variables for the title and navigation element heights. We use the calc() function to calculate the height of the main element using the previously defined variables.

Next, we reset the math settings to their default values ​​and define new variables for the width of the box and its padding. We use math operations to calculate the width of the box and set its width accordingly.

By changing the Math setting to Always, we can perform complex mathematical operations without reducing them to their simplest form, giving us more 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 use LESS to perform different arithmetic operations on them. We add the two colors together, subtract the second color from the first color, multiply the first color by 50%, and then blend the two colors with a weight of 50% for each color.

Users can observe in the output that each operation produces a new color that can be used as the value of 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;
}

in conclusion

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

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

The above is the detailed content of What are the uses of operations in LESS?. For more information, please follow other related articles on the PHP Chinese website!