Less inheritance fails with “undefined class”

Question

I\'m using Bootstrap 3.1.1 and adding my own LESS styles with semantic names.

Using grunt-customize-bootstrap I\'ve added mystyles.less at

Answer 1

Since .dropdown-toggle is defined there inside .panel-heading class as part of the .dropdown .dropdown-toggle selector, it is not available as a standalone global scope mixin (like you try to invoke it). The .panel-heading and .dropdown classes work like namespaces in this case so to access .dropdown-toggle there you need to specify "complete path" to it, e.g.:

.my-toggle {
    .panel-heading > .dropdown > .dropdown-toggle;
    // or just:
    .panel-heading.dropdown.dropdown-toggle;
    // if you prefer shorter things
}

However this won't work the way you probably expect it to. Note that the .dropdown-toggle class is defined not only once inside .panel-heading but also several (~10) times inside other classes (e.g. .btn-group, .input-group-btn etc.). So if you need to get other .dropdown-toggle styles you also need to invoke these other .dropdown-toggle definitions.

Most likely extend will serve in this particular case better but it also has its limitations. Usually I imply that an approach to try to use Bootstrap as a CSS construction kit for your own semantic classes is a dead end. Some things are possible (using mixins, extend, referencing "bootstrap.css" and all of this all together) but many are just not (or at least are super-bloating both in coding (time) and in final CSS result). See my comments here, here and here for more details on this.