diff --git a/content/features/extend.md b/content/features/extend.md index ffcf55d..ebfd12e 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: