Less - Mixin Guards

LESS - Mixin Guards

Description

Mixin guards in LESS provide a way to control when a mixin is applied, similar to conditional statements (like if/else) in programming. They allow mixins to be conditionally rendered based on expressions evaluating to true. A guard is a condition attached to a mixin declaration, enclosed in parentheses after the when keyword. A mixin can have multiple guards, separated by commas (logical OR), or combined with the and keyword (logical AND). This enables powerful, expression-based logic for your styles.

Guards are essential for creating flexible and reusable mixins that adapt to different inputs or contexts. They help avoid the need for multiple, slightly different mixins by incorporating decision-making directly into the mixin’s definition.

Key features and types of guard conditions include:

Category	Description & Examples
1	Comparison Operators Guards frequently use comparison operators to evaluate expressions. These include: = (equal to), > (greater than), >= (greater than or equal to), < (less than), <= (less than or equal to). These can be used to compare numbers, strings, keywords, and other Less data types.
2	Logical Operators Multiple conditions can be combined using logical operators: and (both conditions must be true), or (at least one condition must be true, typically by defining multiple guarded mixins with the same name or using comma-separated guards), and not (negates a condition).
3	Type Checking Functions LESS provides built-in functions to check the type of a value, which are very useful in guards. Examples include: iscolor(), isnumber(), isstring(), iskeyword(), isurl(), ispixel(), ispercentage(), isem(), isunit().
4	The default() function The default() function acts as a fallback. A mixin guarded with default() will only be matched if no other mixin with the same name (and matching arity) is matched through its guards. This is useful for providing a default style when specific conditions aren’t met.

Example

The following example demonstrates the use of mixin guards to apply different font sizes based on the lightness of a color:

Suppose we have the following HTML structure:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mixin Guards Example</title>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
    <h2>Example of Mixin Guards</h2>
    <p class="light-theme-text">Text for light themes (e.g., light background).</p>
    <p class="dark-theme-text">Text for dark themes (e.g., dark background).</p>
</body>
</html>

Now, let’s create the style.less file:

style.less

// Mixin to set font properties based on background color lightness
.text-style(@bg-color) when (lightness(@bg-color) >= 50%) {
    // Applied if background is light
    color: #333; // Dark text for light background
    font-size: 16px;
}

.text-style(@bg-color) when (lightness(@bg-color) < 50%) {
    // Applied if background is dark
    color: #f0f0f0; // Light text for dark background
    font-size: 18px;
}

// A general mixin that could be used by both, or a default
.text-style(@bg-color) when (default()) {
    // This default might not be hit if the above cover all cases for @bg-color usage
    // Or, it can be used to apply common styles regardless of the specific guard match,
    // if structured differently (e.g. a general mixin called by guarded ones).
    // For this specific example, we'll ensure it sets a base color if no lightness condition met.
    // However, with lightness, one of the above two will always match for a valid color.
    // Let's refine it for a clearer default scenario using a different parameter.
}

// Example usage:
.light-theme-text {
    background-color: #ffffff; // A light color
    .text-style(#ffffff);
    padding: 10px;
}

.dark-theme-text {
    background-color: #222222; // A dark color
    .text-style(#222222);
    padding: 10px;
}

To compile style.less to style.css, you can use the Less compiler via Node.js/npm. First, ensure you have Node.js and npm installed. Then, install Less globally or as a project dependency:

npm install -g less  # For global installation
# or for a project: npm install less --save-dev

Then, compile the file:

lessc style.less style.css

Executing the above command will create the style.css file with the following content:

style.css (Compiled Output)

.light-theme-text {
  background-color: #ffffff;
  color: #333;
  font-size: 16px;
  padding: 10px;
}
.dark-theme-text {
  background-color: #222222;
  color: #f0f0f0;
  font-size: 18px;
  padding: 10px;
}

Output Explanation

When you open the mixin-guard.html (or equivalent HTML file) in a browser:

• The text within the <p class="light-theme-text"> element will have a dark color (#333) and a font size of 16px because its background (#ffffff) has a lightness greater than or equal to 50%.
• The text within the <p class="dark-theme-text"> element will have a light color (#f0f0f0) and a font size of 18px because its background (#222222) has a lightness less than 50%.

This demonstrates how mixin guards enable conditional CSS generation, leading to more dynamic and maintainable stylesheets.

For more advanced guard scenarios, consider combining conditions with and, or using type-checking functions like isnumber() or iscolor() to make your mixins even more robust. For further details, refer to the official Less documentation on mixin guards.