Less - Functions

LESS - Built-in Functions

Description

LESS provides a rich set of built-in functions that allow you to manipulate values directly within your stylesheets. These functions are invaluable for creating dynamic, maintainable, and sophisticated styles. They cover various categories, including:

• Math Functions: For performing calculations (e.g., round(), ceil(), floor(), sqrt(), abs()).
• String Functions: For manipulating text (e.g., escape(), replace(), e(), format()).
• Color Functions: For transforming colors (e.g., lighten(), darken(), saturate(), mix(), rgba()).
• List Functions: For working with comma or space-separated lists of values (e.g., length(), extract()).
• Type Functions: For checking the data type of a value (e.g., isnumber(), iscolor()). Refer to the ‘Type Functions’ chapter for details.
• Miscellaneous Functions: Including percentage() for converting unitless numbers to percentages, unit() for changing or adding units, and more.

These functions help keep your LESS code DRY (Don’t Repeat Yourself) and make complex calculations or transformations readable and manageable.

Example: Using the percentage() function

The following example demonstrates the use of the percentage() function, which converts a unitless number (interpreted as a ratio, e.g., 0.5 for 50%) into a percentage value.

Create an HTML file named functions_example.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LESS Functions Example</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <h1>Example using Functions</h1>
    <p class="my-element">LESS enables customizable, manageable, and reusable stylesheets for websites. This paragraph's width is set using the percentage() function.</p>
</body>
</html>

Create the LESS file named style.less:

@base-color: #007bff; // A nice blue
@container-proportion: 0.8; // Represents 80%

.my-element {
  color: @base-color;
  background-color: lighten(@base-color, 30%); // Using a color function
  width: percentage(@container-proportion); // Using the percentage() function
  padding: round(15.7px); // Using a math function
  font-family: e("Arial, sans-serif"); // Using e() for unquoted string
}

To compile style.less to style.css, you would typically use the LESS compiler via Node.js/npm:

First, ensure you have Node.js and npm installed. Then, install the LESS compiler globally (or as a project dependency):

npm install -g less

Then, compile your file:

lessc style.less style.css

The compiled style.css will contain:

.my-element {
  color: #007bff;
  background-color: #99ccff; /* Result of lighten(#007bff, 30%) */
  width: 80%;               /* Result of percentage(0.8) */
  padding: 16px;            /* Result of round(15.7px) */
  font-family: Arial, sans-serif; /* Result of e("Arial, sans-serif") */
}

Output Description

When you open functions_example.html in a web browser:

• The main heading ‘Example using Functions’ will be displayed.
• The paragraph with the class my-element will have blue text (#007bff).
• Its background will be a lighter shade of blue (#99ccff).
• Its width will be 80% of its containing block.
• Its padding will be 16px.
• Its font will be Arial or a generic sans-serif font.

This demonstrates how LESS functions can dynamically generate CSS values, leading to more flexible and maintainable stylesheets.