0

To avoid style conflicts, I've put Bootstrap in a separate namespace as described in this answer:

.bootstrap-styles {
  @import 'bootstrap';
}

Now using a Bootstrap variable such as @gray-lighter gives an error:

.footer {
  // NameError: variable @gray-lighter is undefined in ...
  border-top: 1px solid @gray-lighter;
}

How can I access a variable defined in a different (non-parent) scope in less?

Community
  • 1
  • 1
vitaut
  • 49,672
  • 25
  • 199
  • 336

1 Answers1

1

In that way you can't (see #1848). If a namespace contains only variables you could do it like:

.footer {
    .bootstrap-styles(); // copy that namespace into this scope
    border-top: 1px solid @gray-lighter;
}

But since .bootstrap-styles also contains styles this will also put all its styles onto .footer. So if you really need to re-use BS variables in a namespaced manner you need to import them separately from styles, e.g. like this:

.bootstrap-styles {
    @import 'bootstrap';
}

.bootstrap {
    @import (multiple) 'variables';
}

.footer {
    .bootstrap(); // using Bootstrap variables here
    border-top: 1px solid @gray-lighter;
}

---

Also note that by wrapping the whole bootstrap.less into a namespace you actually break many of its styles (see #2052 etc., so using it this way is quite questionable).

seven-phases-max
  • 11,765
  • 1
  • 45
  • 57
  • Thanks for the answer. Do you know any way to resolve CSS class conflicts between Bootstrap and other libraries without breaking Bootstrap styles? – vitaut Dec 17 '14 at 15:45