CODEWITHSUNDEEP
less
user3314010
user3314010

Reputation: 41

Less - Overriding variables seems to dont work

i try to override some less variables but it seems to don`t work. Here is how i wanna do it:

@hightlight-color-orange-01:    #ffbf7f;

@import 'customLess';

Content of customLess.less:

@hightlight-color-orange-01:    #d1b545;

But the style from the customLess.less is ignored.

Is there a way i can do that over @import?

Regards, Kai

Upvotes: 1

Views: 60

Answers (1)

Bass Jobsen
Bass Jobsen

Reputation: 49044

The Less language is just like CSS a declarative language. For variables lazy loading and the last declaration wins rule will applied.

So the following Less code:

p {
 color: @color;
}

@color: red; 
@color: yellow;

compiles into CSS as follows:

p {
color: yellow;
}

So you can use the @color before its declaration (lazy loading) and @color evaluates yellow everywhere in the code (last declaration wins).

Notice that last declaration wins only count for variables in the same scope (or better local scope can overrule the parent scope but NOT vice versa):

@value: global;

selector1 {
prop: @value;
}

selector2 {
@value: local;
prop: @value;
}

outputs:

selector1 {
  prop: global;
}
selector2 {
  prop: local;
}

Code from @import directive will be top bottom injected in the code and before applying the last declarations wins.

Upvotes: 1

Related Questions