1

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?

j08691
  • 204,283
  • 31
  • 260
  • 272
bardo
  • 363
  • 2
  • 10

1 Answers1

3

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.

Community
  • 1
  • 1
seven-phases-max
  • 11,765
  • 1
  • 45
  • 57
  • Not the answer I was hoping for but thanks anyway for the load of info :) – bardo Jun 16 '14 at 21:18
  • I've rolled back your edit. Nor `>` neither whitespace have any meaning for the namespaced mixins, so even if mixin calls pretend to look like HTML selector pattern matching they actually are not (so `.panel-heading > .dropdown > .dropdown-toggle`; and `.panel-heading.dropdown.dropdown-toggle;` are equivalent in this case. And that's another big story why it is so). – seven-phases-max Jun 16 '14 at 23:12
  • Thanks again for the great lesson, and sorry for the mistaken edit. – bardo Jun 17 '14 at 09:42