Less - CSS Guards

LESS - Conditional Styling with CSS Guards

Description

CSS Guards in LESS allow you to apply mixins conditionally, based on expressions. They work like if statements for your mixins, enabling more dynamic and intelligent stylesheets. A mixin with a guard will only output its styles if the guard condition evaluates to true.

Guards are defined using the when keyword followed by a condition in parentheses. You can use various operators and functions within these conditions, including comparison operators (>, <, =, >=, <=), logical operators (and, or, not), and type-checking functions (e.g., iscolor(), isnumber(), isstring()).

Example: Adapting Styles Based on Input

Let’s create a mixin that applies different styles based on the type or value of a parameter:

style.less

// Mixin for setting text color, guarded by type
.set-text-color(@value) when (iscolor(@value)) {
  color: @value;
}

// Mixin for font size, guarded by type and value
.set-font-size(@value) when (isnumber(@value)) and (@value > 10) {
  font-size: unit(@value, px);
}

// Mixin for specific theme styling
.apply-theme(@theme-name) when (@theme-name = 'dark') {
  background-color: #333;
  color: #f1f1f1;
}

.apply-theme(@theme-name) when (@theme-name = 'light') {
  background-color: #f8f8f8;
  color: #333;
}

// Usage
.element-one {
  .set-text-color(blue);          // Applies: color: blue;
  .set-font-size(16);           // Applies: font-size: 16px;
}

.element-two {
  .set-text-color("this is not a color"); // Guard fails, no output for color
  .set-font-size(8);              // Guard fails (8 is not > 10), no output for font-size
}

.dark-card {
  .apply-theme('dark');
}

.light-card {
  .apply-theme('light');
  .set-font-size(12px); // Applies font-size if it's a number > 10px (will convert 12px to 12)
}

To compile this LESS code (e.g., using the LESS command-line compiler):

lessc style.less style.css

Expected style.css Output:

.element-one {
  color: blue;
  font-size: 16px;
}

/* .element-two will be empty as guards failed */
.element-two {}

.dark-card {
  background-color: #333;
  color: #f1f1f1;
}

.light-card {
  background-color: #f8f8f8;
  color: #333;
  font-size: 12px;
}

Key Use Cases for Guards:

• Creating adaptable components that change appearance based on input parameters.
• Implementing themes by guarding style blocks with theme identifiers.
• Validating mixin inputs to prevent unexpected CSS output.
• Writing more robust utility mixins that handle different data types gracefully.

Multiple Guards and & Feature:

You can define multiple mixins with the same name but different guards. LESS will only execute the one(s) whose conditions are met. The & (and) keyword in a selector context is different from the and logical operator used in guard conditions. While guards can be combined with and, or, and not, the & feature refers to parent selector referencing, which is a separate concept often used within mixins but not directly part of guard syntax itself.