Less - Mixins

LESS - Mixins

Mixins in Less are a cornerstone feature for writing maintainable and DRY (Don’t Repeat Yourself) stylesheets. They allow you to embed a collection of CSS properties from one ruleset (the mixin) into another. Think of them as reusable ‘CSS snippets’ or ‘functions’ for styles. You typically define a mixin using a class or ID selector, and then ‘call’ it within another ruleset to inherit its styles.

Key Aspects of Less Mixins:

• Basic Usage: Simply include the selector of the ruleset you want to mix in. For example, if you have .my-styles { color: blue; }, you can use it in another class like so: .another-class { .my-styles; }.
• Hiding Mixins from CSS Output (Using Parentheses): If you define a mixin with parentheses () after its name (e.g., .utility-mixin() { ... }), this mixin itself will not be output as a CSS rule. It will only be used when called by other rulesets. This is ideal for creating utility mixins that aren’t meant to be standalone styles.
• Mixins with Selectors: Mixins can contain not just properties, but also nested selectors. When mixed in, these selectors are also included, relative to the calling selector.
• Namespaces: To avoid naming conflicts and better organize your mixins, you can group them under a namespace using an ID selector (e.g., #utils > .clearfix() {}). You would then call it as #utils > .clearfix();.
• The !important Keyword: You can append !important to a mixin call (e.g., .my-mixin() !important;). This will apply !important to every property inherited from that mixin, effectively overriding other styles.

Example

Let’s look at a practical example demonstrating mixins in a LESS file.

Suppose you have the following HTML structure:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css" type="text/css" />
    <title>LESS Mixins Example</title>
</head>
<body>
    <h1>Welcome to Modern Web Styling!</h1>
    <p class="important-message">This message uses a base style and an important highlight.</p>
    <p class="info-message">This message just uses the base style.</p>
    <p class="custom-alert">This alert uses the base style with a custom background.</p>
</body>
</html>

Next, create the style.less file:

style.less

// Base text style mixin (will not be output directly thanks to '()')
.base-text-style() {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

// A visible style that can also be used as a mixin
.highlight-text {
  color: red;
  font-weight: bold;
}

.important-message {
  .base-text-style(); // Using the utility mixin
  .highlight-text;     // Using the .highlight-text class as a mixin
  padding: 10px;
  border: 1px solid red;
}

.info-message {
  .base-text-style();
  padding: 8px;
  background-color: #f0f0f0;
}

.custom-alert {
  .base-text-style(); // Calling with parentheses explicitly
  background-color: #FFEEBA; // A light yellow, replacing the old #LESS520
  color: #856404;
  padding: 12px;
  border: 1px solid #FFDF7E;
}

To compile style.less to style.css, use the Less compiler command:

lessc style.less style.css

Executing this command will generate the style.css file with the following content:

style.css (Compiled Output)

.highlight-text {
  color: red;
  font-weight: bold;
}
.important-message {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: red;
  font-weight: bold;
  padding: 10px;
  border: 1px solid red;
}
.info-message {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  padding: 8px;
  background-color: #f0f0f0;
}
.custom-alert {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background-color: #FFEEBA;
  color: #856404;
  padding: 12px;
  border: 1px solid #FFDF7E;
}

Output Explanation

When you open index.html in a browser:

• The .important-message paragraph will inherit styles from both .base-text-style() (font, size, line-height) and .highlight-text (red color, bold weight), plus its own padding and border.
• The .info-message paragraph will only inherit styles from .base-text-style() and have its own padding and background.
• The .custom-alert paragraph also inherits from .base-text-style() and has its specific background, color, padding, and border.
• Notice that .base-text-style() itself does not appear as a class in the final CSS, because it was defined with parentheses. However, .highlight-text does appear because it was defined without parentheses.

Parentheses () are optional when calling a mixin that is also a CSS class (like .highlight-text). Both .highlight-text; and .highlight-text(); would produce the same result for including its styles. However, for defining a mixin that should not be output (a utility mixin), the parentheses are mandatory in its definition (e.g., .base-text-style() { ... }).