less.js icon indicating copy to clipboard operation
less.js copied to clipboard

Whether the official statement "Selectors with variables will not match" is wrong?

Open micro-carving opened this issue 2 years ago • 1 comments

To reproduce:

@variable: .bucket;
@{variable} { // interpolated selector
  color: blue;
}
.some-class:extend(.bucket) {} // does nothing, no match is found

Current behavior:

.bucket,
.some-class {
  color: blue;
}

image

image

Expected behavior:

.bucket {
  color: blue;
}

Environment information:

  • less version: v4.2.0
  • nodejs version: 12.22.12
  • operating system: win10

micro-carving avatar Nov 30 '23 14:11 micro-carving

Added:

The following is the description of the official document:

extend-feature-selector-interpolation-with-extend

However, :extend attached to an interpolated selector works:

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

compiles to:

.bucket, .selector {
  color: blue;
}

Done!

Using the same environment, the results are as follows:

image

micro-carving avatar Nov 30 '23 14:11 micro-carving