Question

这是我的LESS文件的重要部分：

input.ng-invalid { 
  color: #e74c3c;
  border-color: #e74c3c;
}

它汇编成：

input.ng-invalid .form-control {
  color: #e74c3c;
  border-color: #e74c3c;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

http://plnkr.co/edit/118uS4RciQYVPa5KH6oU

form-control类来自Bootstrap，如果LESS没有插入空格（input.ng-invalid.form-control工作正常），则不会破坏选择器

问题是浏览器正在寻找input个孩子，其中包含form-control个班级。显然，我的HTML中没有input的孩子。

bootstrap的LESS文件中是否有设置将form-control类绑定到每个input？

Answer 1

这不是一个真正的答案，而是一个不适合评论框的问题调查。因为我这里没有7z解压缩器，所以我没有通过你的一套较少的文件，但也许我可以给你一些想法来帮助你解决问题或破解它。

获得这样的上下文关系的一种方法：

input.ng-invalid .form-control { ... }

在Less文件中有一个这样的块：

input.ng-invalid {
   ...
   .form-control { ... }
   ...
}

现在关联可能通过mixin发生，所以你可能找不到上面的确切模式，但是你可能会发现想要发现.form-control的声明位置（也许是mixin）。

现在，如果你想要这个：

input.ng-invalid.form-control { ...}

你是一个像我上面展示的那样的块，你可以在&选择器之前添加.form-control，这样你就可以添加一个类，而不是从嵌套块中获取上下文关系。 &表示父块中的选择器。它会是这样的：

input.ng-invalid {
   ...
   &.form-control { ... }
   ...
}

查看您是否发现.form-control的定义位置并进行试用。

（请注意，如果您的代码的其他部分使用此mixin或选择器，它们可能无法像以前那样工作 - 这只是使用Less而不是Bootstrap框架分析可能的解决方案;添加bootstrap标记您的问题，您可能会吸引一些可能有更好解决方案的Bootstrap专家。）

Answer 2

我查看了您提供的zip包，并将input.ng-invalid定义为（selfmade.less:L97）：

input.ng-invalid {
    .form-control-validation(@brand-danger; @brand-danger);
}

预计将编译为您实际获得的内容（即附加在.form-control-validation中定义的嵌套类）。这就是这个mixin应该做的事情。

-

bootstrap的LESS文件中是否有设置将form-control类绑定到每个输入？

我看不到任何内容（至少在Bootstrap 3.1.1中），所以我只能建议以下技巧：

.danger_ {
    .form-control-validation
        (@brand-danger, @brand-danger);
}

input.ng-invalid.form-control
    :extend(.danger_ .form-control all) {}

将编译为this css（假设为bs-3.1.1）。

-

或者有.has-error类，你可以用同样的方式扩展：

input.ng-invalid.form-control
    :extend(.has-error .form-control all) {}

并获得更紧凑的输出但颜色略有不同（@state-danger-text而不是@brand-danger）。

LESS编译器神奇地将不需要的类添加到我的选择器

2 个答案:

-

-