Less - Operations

LESS - Operations

Description

LESS allows you to perform arithmetic operations directly within your stylesheets. This capability is powerful for creating dynamic and maintainable styles. Operations can be applied to numbers, dimensions (values with units like px, em, %), and colors.

Supported arithmetic operations include:

Addition (+)
Subtraction (-)
Multiplication (*)
Division (/)

Unit Handling: LESS attempts to be intelligent about units during operations. For example, 10px * 2 results in 20px. If you mix units, LESS will typically use the unit of the left-hand operand or try a conversion if possible (e.g., 2in + 5cm). However, for clarity and predictability, it’s best to operate on compatible units or ensure conversions are explicit.

Color Operations: Operations can also be performed on color values. For instance, adding #111 to #222 will result in #333333. Each color channel (Red, Green, Blue) is operated on individually.

Parentheses and Precedence: Standard mathematical operator precedence applies (multiplication/division before addition/subtraction). Use parentheses () to explicitly control the order of operations or to ensure division is calculated, especially when the strictMath option is enabled or for general clarity. For example, (@variable / 2) is safer than @variable / 2 for division.

Example

The following examples demonstrate various operations in LESS.

HTML File (operations_example.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LESS Operations Example</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="container">
        <header class="site-header">Header</header>
        <article class="main-content">Main Content</article>
        <aside class="sidebar">Sidebar</aside>
    </div>
    <div class="box">A box with calculated padding.</div>
</body>
</html>

LESS File (style.less):

@base-font-size: 16px;
@base-padding: 10px;
@site-width: 960px;
@sidebar-width: (@site-width / 3);
@primary-color: #3498db; // A nice blue

.container {
  width: @site-width;
  margin: 0 auto;
}

.site-header {
  background-color: @primary-color;
  color: white;
  padding: @base-padding * 1.5; // 10px * 1.5 = 15px
  font-size: @base-font-size + 4px; // 16px + 4px = 20px
}

.main-content {
  width: @site-width - @sidebar-width - (2 * @base-padding); // 960px - 320px - 20px = 620px
  float: left;
  padding: @base-padding;
  background-color: lighten(@primary-color, 40%); // Lighter shade of primary color
}

.sidebar {
  width: @sidebar-width - (2 * @base-padding); // 320px - 20px = 300px
  float: right;
  padding: @base-padding;
  background-color: @primary-color - #111111; // Darken color slightly
}

.box {
  // Using parentheses for division is a good practice
  padding: (@base-padding / 2) (@base-padding * 2);
  margin-top: @base-font-size;
  border: 1px solid (#000000 + #333333); // Result is #333333
}

Compile style.less to style.css:

lessc style.less style.css

Compiled CSS File (style.css):

.container {
  width: 960px;
  margin: 0 auto;
}
.site-header {
  background-color: #3498db;
  color: white;
  padding: 15px;
  font-size: 20px;
}
.main-content {
  width: 620px;
  float: left;
  padding: 10px;
  background-color: #a9d7f4;
}
.sidebar {
  width: 300px;
  float: right;
  padding: 10px;
  background-color: #2387ca;
}
.box {
  padding: 5px 20px;
  margin-top: 16px;
  border: 1px solid #333333;
}

Output

After saving the HTML and LESS files, and compiling the LESS to CSS:

Open operations_example.html in a browser.
You’ll observe the layout and styles are applied based on the calculations performed by LESS. For example, the header padding will be 15px, the main content width will be 620px, etc.

Operations are fundamental for creating scalable and maintainable design systems where dimensions, spacing, and even color variations can be derived from base values. (For more details on operations and math, see the official Less documentation: lesscss.org/features/#operations-feature)