Less - Extend

LESS - Using Extend for Selector Inheritance

The extend feature in LESS is a powerful way to share CSS properties between selectors without duplicating code in your HTML or CSS. It’s a pseudo-class that merges the extending selector with the selector being extended, resulting in a comma-separated list of selectors sharing the same style block in the compiled CSS. This is different from mixins, which copy properties into the calling selector.

Basic Example

Consider the following HTML and LESS code:

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>LESS Extend Example</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
    <div class="alert basic-alert">
        <p>This is a basic alert.</p>
    </div>
    <div class="alert warning-alert">
        <h2>Warning!</h2>
        <p>This is a warning alert, extending basic alert styles.</p>
    </div>
</body>
</html>

style.less:

.basic-alert {
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #333;
}

.warning-alert {
    &:extend(.basic-alert); // Extends all styles from .basic-alert
    background-color: #fff3cd;
    border-color: #ffeeba;
    color: #856404;

    h2 {
        margin-top: 0;
        color: inherit; // Inherits color from .warning-alert
    }
}

Compile style.less to style.css using: lessc style.less style.css

Compiled style.css:

.basic-alert,
.warning-alert {
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #333;
}
.warning-alert {
  background-color: #fff3cd;
  border-color: #ffeeba;
  color: #856404;
}
.warning-alert h2 {
  margin-top: 0;
  color: inherit;
}

In this example, .warning-alert inherits all the properties from .basic-alert. The compiled CSS groups .basic-alert and .warning-alert for the shared styles, making the CSS more DRY (Don’t Repeat Yourself).

Extend Syntax Options

Extend can be used in various ways:

No.	Syntax Type & Description
1	Extend Attached to Selector selector:extend(targetSelector) { /* styles */ } Attaches the extend to the selector itself. Useful when the extending selector also has its own unique properties.
2	Extend Inside Ruleset selector { &:extend(targetSelector); /* other styles */ } This is the most common syntax, placing &:extend() inside the ruleset.
3	Extending Multiple Selectors selector { &:extend(target1, target2); } A selector can extend multiple target selectors simultaneously.
4	Extending Nested Selectors .parent .child { &:extend(.base .item); } Extend can target nested selectors. The extended selector must match exactly unless using extend all.
5	Exact Matching with Extend By default, extend looks for an exact match of the selector being extended. For instance, a.class will not match .class unless all keyword is used.
6	Extend “all” selector:extend(target all) { } or selector { &:extend(target all); } When the keyword all is used, LESS extends all occurrences of the target selector, even if it’s part of a compound selector (e.g., .target.another-class or ul .target).
7	Selector Interpolation with Extend Extend can be used with interpolated selectors: @my-selector: .error; .critical { &:extend(@{my-selector}); }.
8	Scoping and @media Directives Extend normally only matches selectors within the same @media block. An extend outside a media query will match selectors in the base scope. To extend across media queries is generally not possible or advised due to CSS specificity rules.
9	Duplication Detection LESS attempts to avoid generating redundant CSS. extend helps by grouping selectors rather than duplicating properties.

Use Cases for Extend

No.	Use Case & Description
1	Semantic Class Grouping Use extend to group selectors that share a common set of base styles, allowing for more semantic HTML without adding numerous utility classes. This is the primary use case.
2	Reducing CSS Output Size By grouping selectors that share styles, extend helps reduce the overall size of the compiled CSS file compared to using mixins for the same purpose (which would duplicate properties).
3	Creating Style Variations Easily create variations of a base component (like alerts, buttons) by extending a base style and then overriding or adding specific properties.

When to Use Extend vs. Mixins:

• Use extend when you want to establish an “is-a” relationship (e.g., .warning-alert is a type of .alert) and want to group selectors in your CSS.
• Use mixins when you want to include a bundle of properties in a selector without creating a relationship between selectors, or when you need to pass parameters to customize the included styles.

Understanding extend is key to writing efficient and maintainable LESS code. For advanced scenarios and edge cases, consult the official LESS documentation.