较少的继承失败，并且“未定义类” [英] Less inheritance fails with "undefined class"

问题描述

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

使用 grunt-customize-bootstrap 我在 bootstrap.less 的末尾添加 mystyles.less responsive-utilities.less （我不知道为什么，这是 grunt-customize-bootstrap 的默认行为

<$>

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


这是如何在bootstrap的 panels.less ：

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

但是咕噜不是真的很高兴：

 运行less：compile（less）task 
> NameError：.dropdown-toggle未定义在less / mystyles.less在第51行，第15列：
>> 50> .my-toggle {
>> 51 .dropdown-toggle; 
>> 52} 
警告：编译较少/ bootstrap.less时出错使用--force继续。 
 

我观察过这个行为与其他类，例如 .navbar- right （例如 .pull-right（）是确定的），但我不能真正理解我做错了。

解决方案

由于 .dropdown-toggle 有 .panel-heading 类作为 .dropdown .dropdown-toggle 选择器的一部分，它不可用一个独立的全局范围混合（像你试图调用它）。 .panel-heading 和 .dropdown 类的工作方式如 namespaces ，以便访问 .dropdown-toggle 您需要指定完整路径，例如：

  .my-toggle {
 .panel-heading > .dropdown> .dropdown-toggle; 
 //或just：
 .panel-heading.dropdown.dropdown-toggle; 
 //如果你喜欢较短的东西
} 
  

/ strong>这不会工作，你可能期望它的方式。注意， .dropdown-toggle 类不仅在 .panel-heading ）次（例如 .btn-group ， .input-group-btn 等）。所以如果你需要得到其他 .dropdown-toggle 样式，你还需要调用这些其他 .dropdown-toggle 定义。

很有可能 extend 将更好地服务于这种特殊情况，但它也有其局限性。通常我暗示，尝试使用Bootstrap作为CSS构建工具包为自己的语义类的方法是一个死胡同。有些事情是可能的（使用mixins，扩展，引用bootstrap.css和所有这些都在一起），但许多只是没有（或至少是在编码（时间）和最终的CSS结果超膨胀）。请参阅我的意见此处，< a href =http://stackoverflow.com/questions/22983475/a-smarter-way-for-integrating-bootstrapor-even-from-another-less-css-file-clas#comment35124805_22983475>此处和此处了解更多详情。

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?

解决方案

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.

这篇关于较少的继承失败，并且“未定义类”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！