css - 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 the end of bootstrap.less, just before the inclusion of responsive-utilities.less (I don't know why, that's grunt-customize-bootstrap's default behavior, but even in the last position the issue remains).

I defined my own dropdown menu like this:

.my-dropdown {
  .dropdown;
  > .my-toggle {
    .dropdown-toggle;
  }
}

This is how it is defined in bootstrap's panels.less:

> .dropdown .dropdown-toggle {
  color: inherit;
}

But grunt is not really happy about it:

Running "less:compile" (less) task
>> NameError: .dropdown-toggle is undefined in less/mystyles.less on line 51, column 15:
>> 50             > .my-toggle {
>> 51               .dropdown-toggle;
>> 52             }
Warning: Error compiling less/bootstrap.less Use --force to continue.

I've observed this behavior with other classes, for example .navbar-right (while for example .pull-right() is ok), but I can't really understand what I'm doing wrong. Can anybody illuminate me?

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.