Question

我正在使用Bootstrap 3.1.1并添加我自己的LESS样式和语义名称。

使用grunt-customize-bootstrap我已在mystyles.less末尾添加bootstrap.less，就在加入responsive-utilities.less之前（我不知道为什么，那个grunt-customize-bootstrap的默认行为，但即使在最后一个位置，问题仍然存在）。

我定义了我自己的下拉菜单：

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

这是在bootstrap＆＃39; panels.less中定义的方式：

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

但是咕噜并不高兴：

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.

我已经在其他课程中发现过这种行为，例如.navbar-right（例如.pull-right()就好了），但我无法理解我的观点做错了。任何人都可以照亮我吗？

Answer 1

由于.dropdown-toggle在.panel-heading类中定义为.dropdown .dropdown-toggle选择器的一部分，因此它不能作为独立的全局范围mixin（就像您尝试调用它一样）。在这种情况下，.panel-heading和.dropdown类的工作方式与namespaces类似，因此要访问.dropdown-toggle，您需要指定＆＃34;完整路径＆＃34;对它，例如：

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

然而这不会像您预期的那样工作。请注意，.dropdown-toggle类不仅在.panel-heading内定义一次，在其他类内定义了几（~10）次（例如.btn-group，.input-group-btn等。因此，如果您需要获取其他.dropdown-toggle个样式，还需要调用其他.dropdown-toggle个定义。

最有可能extend更适合这种情况，但也有其局限性。通常我暗示尝试使用Bootstrap作为您自己的语义类的CSS构造工具包的方法是一个死胡同。有些事情是可能的（使用mixins，extend，referencing＆＃34; bootstrap.css＆＃34;以及所有这些都在一起）但很多都没有（或者至少在编码时都是超级膨胀的（时间））并在最终的CSS结果中）。有关详细信息，请参阅我的评论here，here和here。

较少的继承失败了＆＃34;未定义的类＆＃34;

1 个答案: