Less - Parametric Mixins

LESS - Parametric Mixins

Description

Parametric mixins are a cornerstone of LESS, allowing you to create reusable blocks of CSS rules that accept arguments (parameters). This enables you to customize the mixin’s output each time it’s called, significantly enhancing code reusability and reducing redundancy (following the DRY principle: Don’t Repeat Yourself).

Think of parametric mixins like functions in programming languages; they take inputs and produce CSS declarations based on those inputs.

Basic Syntax:

.mixin-name(@param1; @param2: defaultValue; @param3...) {
  // CSS rules using @param1, @param2, @param3
  property: @param1;
  another-property: @param2;
}

// Calling the mixin
.selector {
  .mixin-name(value1);
}

In this syntax:

• Parameters are declared within parentheses, separated by semicolons (;) or commas (,).
• Default values can be provided for parameters (e.g., @param2: defaultValue).
• The ... syntax can be used to accept a variable number of arguments (see @rest variable below).

Key Features of Parametric Mixins:

Feature No.	Type & Description	Conceptual Example
1	Multiple Parameters Mixins can accept multiple parameters. You can separate parameters with either a semicolon (;) or a comma (,). While both work, consistency within a project is recommended. Semicolons are often preferred as commas can be ambiguous with CSS list syntax in some contexts.	.border-radius(@radius) { ... } .box-shadow(@x; @y; @blur; @color) { ... }
2	Default Parameter Values You can assign default values to parameters. If a mixin is called without providing a value for such a parameter, the default value is used.	.button-style(@bg-color: blue; @text-color: white) {<br> background-color: @bg-color;<br> color: @text-color;<br>}<br>.my-button {<br> .button-style(); // Uses default blue background, white text<br>}<br>.alert-button {<br> .button-style(@bg-color: red);<br>}
3	Named Parameters When calling a mixin, you can supply arguments by name instead of relying on their position. This improves readability, especially for mixins with many parameters or multiple optional parameters.	.padding(@top: 10px; @right: 20px; @bottom: 10px; @left: 20px) { ... }<br>.element {<br> .padding(@left: 5px; @top: 15px);<br>}
4	The @arguments Variable Inside a mixin, the special variable @arguments contains all arguments passed to the mixin, including those with default values if not overridden. This is useful for passing all arguments to another mixin or for generic processing.	.wrapper-mixin(...) {<br> // @arguments here will be all args passed to wrapper-mixin<br> .inner-mixin(@arguments);<br>}
5	The @rest... Variable (Variadic Mixins) By using ... after a parameter name (conventionally @rest... or @args...), a mixin can accept a variable number of arguments. These arguments are available as a space-separated list in that variable.	.flexible-box(@flex-grow: 1; @rest...) {<br> flex-grow: @flex-grow;<br> // @rest might contain flex-shrink, flex-basis values<br> flex: @flex-grow @rest;<br>}<br>.item {<br> .flexible-box(1; 0; auto); // @rest becomes 0 auto<br>}
6	Pattern-Matching & Guards LESS allows you to define multiple mixins with the same name but different parameter signatures or guard conditions. LESS then chooses which mixin to apply based on the arguments passed or conditions met. This is extremely powerful for creating conditional logic.	.triangle(up; @size: 5px; @color: black) { /* styles for up arrow */ }<br>.triangle(down; @size: 5px; @color: black) { /* styles for down arrow */ }<br><br>.my-arrow {<br> .triangle(up; 10px; blue);<br>}

Practical Application Example: Creating a Border Mixin

.custom-border(@width: 1px; @style: solid; @color: #ccc) {
  border: @width @style @color;
}

.header {
  // Use all default values
  .custom-border();
}

.content-box {
  // Override some values
  .custom-border(2px; @color: blue); // Uses default style 'solid'
}

.footer {
  // Provide all values
  .custom-border(1px; dashed; green);
}

This mixin provides a flexible way to apply borders, with sensible defaults, making your stylesheet cleaner and easier to maintain.