From 75d81503dc5d6317d728c594575ec3bfa8fc5287 Mon Sep 17 00:00:00 2001 From: Hashim Khan Date: Thu, 23 Jul 2026 00:29:57 +0500 Subject: [PATCH] Fix interpolated selector :extend example in docs The docs showed @{variable}:extend(.bucket) {}, which does not extend the resolved selector. Use nested &:extend instead. Fixes less/less.js#4326. --- content/features/extend.md | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/content/features/extend.md b/content/features/extend.md index ffcf55d1..ebfd12ef 100644 --- a/content/features/extend.md +++ b/content/features/extend.md @@ -333,24 +333,30 @@ Both of the above examples compile into: } ``` -However, `:extend` attached to an interpolated selector works: +However, `:extend` can be attached to an interpolated selector using the nested `&:extend` form: ```less .bucket { color: blue; } -@{variable}:extend(.bucket) {} +@{variable} { + &:extend(.bucket); +} @variable: .selector; ``` compiles to: -```less -.bucket, .selector { +```css +.bucket, +.selector { color: blue; } ``` +> Note: `@{variable}:extend(.bucket) {}` does not currently extend the interpolated selector. Use the nested `&:extend` form shown above. + + ### Scoping / Extend Inside @media Currently, an `:extend` inside a `@media` declaration will only match selectors inside the same media declaration: