Documentation error. Please fix it.

[Bahurtsev]

On this page: https://lesscss.org/features/#extend-feature-extend-all

This example does not work:

.bucket { color: blue; }
@{variable}:extend(.bucket) {}
@variable: .selector;

compiles to:

.bucket, .selector { color: blue; }

You need to write it like this:

.bucket { color: blue; }
@{variable} { &:extend(.bucket); }
@variable: .selector;

compiles to:

.bucket, .selector { color: blue; }

As I understand it, LESS treats interpolation as "late binding", so :extend() cannot be applied to a selector that has not yet been formed at the parsing stage.

[dosubot]

Hello @Bahurtsev! 👋 I'm here to help you with bugs, questions, and becoming a contributor.

To address the documentation error regarding the :extend feature in LESS, the following points should be clarified:

1. Interpolation and :extend: The documentation should clearly state that :extend cannot be directly applied to selectors formed with variables, as they do not match during parsing. Instead, it should emphasize that :extend can be used with interpolated selectors, which allows for late binding.

2. Correct Usage Example: The correct way to use :extend with a variable is to define the variable first and then use it in a nested context. For example:

   @variable: .selector;
   @{variable} {
       &:extend(.bucket);
   }

   This compiles correctly to include both .bucket and .selector in the output.

3. Clarification on Media Queries: The documentation should also note that :extend inside @media rules only matches selectors within the same media block and can match nested selectors.

These clarifications will help users understand the correct usage of :extend with interpolated selectors and variables in LESS ^[1].

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}