0

If I have a .less file that imports two other .less files that both use and define the same variable name, the last definition in whichever file was imported last is the value used in all the other files. For example:

@import (less) ex1.less
@import (less) ex2.less

ex1.less:

@var: classname;

.@{var} {/*css*/}

ex2.less:

@var: classname2;

.@{var} {/*css*/}

generates:

.classname2 {/*css*/}
.classname2 {/*css*/}

I am not sure how to use namespaces here, so any help would be very appreciated.

Tahsis Claus
  • 1,879
  • 1
  • 15
  • 27
  • Have a look at this question here, it may be usefull: http://stackoverflow.com/questions/15275829/less-css-change-variable-value-for-theme-colors-depending-on-body-class – Nick Mar 27 '15 at 15:25
  • Just put `&{}` around file content you want to isolate from any outer things. (For namespaces and related stuff in this context see for example [#2442](https://github.com/less/less.js/issues/2442)). – seven-phases-max Mar 27 '15 at 15:57

1 Answers1

0

Much like CSS Less cascades it's values, so the last var declaration wins.

You only import one of the files.

Change the second var's name.

Or make one of your less files more concise and use the var where needed.

whoacowboy
  • 6,982
  • 6
  • 44
  • 78