CODEWITHSUNDEEP
csstwitter-bootstrapless
vitaut
vitaut

Reputation: 55564

How to access a variable defined in another scope in less?

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?

Upvotes: 0

Views: 728

Answers (1)

seven-phases-max
seven-phases-max

Reputation: 11820

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).

Upvotes: 1

Related Questions