less / less.js

Less. The dynamic stylesheet language.
http://lesscss.org
Apache License 2.0
17k stars 3.41k forks source link

Cannot override variable imported via :extend() #3706

Open Bilge opened 2 years ago

Bilge commented 2 years ago

To reproduce:

@color: red;

a {
  color: @color;
}

.foo {
  a:extend(a all) {
    @color: green;
  }
}

Current behavior:

.foo a colour is red.

Expected behavior:

.foo a colour is green.

Environment information:

lumburr commented 2 years ago

I have a different opinion, it's not a bug.

@color: red;

a {
  color: @color;
}

.foo {
  a:extend(a all){
    @w: 10px;
    @color: green;
    width: @w;
    color: @color;
  }
}

It become

// first part
a,
.foo a {
  color: red;
}
// second part
.foo a {
  width: 10px;
  color: green;
}

First part is public section, the variable you declare the second time can't affect the first part.

Bilge commented 2 years ago

You are correct. Even without extension, this does not work. I misunderstood from lazy evaluation that declaring a variable after the property that consumes it will update the property if it exists in the same scope or deeper, however that appears not to be the case.

It seems to me lazy evaluation is not really lazy at all. Once a property is declared referencing some variable, that variable has to exist (even if it's physically specified later in the file) in the current scope, and if it is redeclared at any point later, this change is ignored.