2

when defining a mixin multiple times in LESS, and later calling that mixin as follows

.background-color() {
    background: red;
}

.background-color() {
    background: yellow;
}

body {
    .background-color;
}

the result will be a combined output from all the defined mixins

body {
  background: red;    // << output from mixin #1
  background: yellow; // << output from mixin #2
}

while when you apply the same scenario in both Sass & Stylus ( using their own syntax of course ), when you call a mixin that is defined multiple times across your stylesheets, Only the last defined one will be executed ( it will override all previously defined mixins ) as follows.

result Sass and Stylus

body {
  background: yellow; // << output from mixin #2
}

how can I override a mixin in LESS so that the output will be from the last defined mixin ?

Harry
  • 87,580
  • 25
  • 202
  • 214
Anas Nakawa
  • 1,977
  • 1
  • 23
  • 42
  • 1
    I never used `less`, but why would you have two mixins with the same name? Seems like in less, when you use the same name again it just concatenates the rules. – XCS Nov 23 '14 at 12:24
  • 1
    @Cristy for multi-theme architecturing purposes, where a base theme will contain all the necessary variables and mixins, and when creating a child theme, you'll have the option to override base variables/ mixins or just inherit base ones. – Anas Nakawa Nov 23 '14 at 13:24
  • 2
    Less inherits its semantics from CSS where a ruleset does not override previous rulesets with the same name/selector but cascades. Though if those "base" mixins are written by you and thus "modifiable" you can use [`default` guard](http://lesscss.org/functions/#misc-functions-default) to achieve what you want. But in general, yes, you have to use different idioms/design-patterns for your libraries since Less is fundamentally different language beside some basic stuff. – seven-phases-max Nov 24 '14 at 08:57
  • Despite that outputting background twice (red followed by yellow) is not that nicely readable later on, I think it will behave correctly when applied in the browser, since the latter rule will override the previous one. But at the moment I not exactly sure whether that's generelly vaild for Less Mixins. But I guess, it is. – Windwalker Jun 23 '17 at 06:37
  • This topic is also answered in https://stackoverflow.com/questions/17100855/overwrite-less-mixin. – Windwalker Jun 23 '17 at 06:46

1 Answers1

1

You can not override them, alternatively use a variable to define the 'background-color'. For Less variables the last declared win.

Also read Pattern-matching

In Less all matching mixins are compiled in the source. You can use namespace to prevent name collisions, for instance:

#ns1 {
.background-color() {
    background: red;
}
}

#ns2 {
.background-color() {
    background: yellow;
}
}

than you can use:

body {
    #ns2 > .background-color;
}

Double properties are also not removed to make some browser hacks possible, example:

#myElement {
    width: 300px;
    width: 500px\9;
}

To find a solution for your use case you should reformulate your question and explain why you have these same named mixins in the first place.

Community
  • 1
  • 1
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224