Html LessCss ：带有 & 关键字的多个类选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13214750/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
LessCss : multiple class selectors with & keyword
提问by Bosworth99
Say - have a .less sheet with a large number of "multiple" css rules to manage iconography. Something like so:
说 - 有一个带有大量“多个”css 规则的 .less 表来管理图标。像这样：
.icon { display:inline-block; position:relative; text-indent:-9999em;}
.icon-l.legend { width:24px; height:24px;}
.icon-white.legend{ background:url(@icon_legend_white) no-repeat;}
.icon-l.arrow_left{background-position: -128px -32px;}
and apply rules like this as such:
并应用这样的规则：
<i class="icon icon-l icon-color legend arrow_left"></i>
This works fine when I have access to markup, as one would expect, but I'm having a hard time applying these rules via lessto a given element:
正如人们所期望的那样，当我可以访问标记时，这很好用，但是我很难将这些规则less应用于给定元素：
Here's what i would expect to work:
这是我期望的工作：
#something{
.icon;
.icon-l.legend;
.icon-white.legend;
.icon-l.arrow_left;
}
Which just throws an error.
这只会引发错误。
I'm "led to believe" that the "&" operator can apply rules like so:
我“相信”“&”运算符可以应用如下规则：
#something{
.icon;
.icon-l{&.legend{}};
.icon-white{&.legend{}};
.icon-l{&.arrow_left{}};
}
This throws no error, but only the rules for .iconare getting applied.
这不会引发错误，但只会应用 的规则.icon。
Anyone have a solution?
有人有解决方案吗？
UPDATE
更新
FYI - I'm compiling several .less files together for many different unique sheets. Works really well.
仅供参考 - 我正在为许多不同的独特工作表编译几个 .less 文件。效果很好。
SublimeText2 plugin- works reasonably well, and integrates really well into the workflow (need to 'build' the file) - but could not render multiple classes like this
SublimeText2 插件- 工作得相当好，并且非常好地集成到工作流程中（需要“构建”文件） - 但不能像这样渲染多个类
SimpLess- is a nice standalone that I like alot, except that I kept getting errors compiling my less stack - without clear reference to the error location
SimpLess- 是我非常喜欢的一个很好的独立软件，除了我在编译我的 less 堆栈时不断出错 - 没有明确引用错误位置
WinLess- manages to complete all my compiling needs, as well as successfully compiling multiple classes like this. Also - its error reporting is very specific. Making it the winner.
WinLess- 设法完成我所有的编译需求，以及像这样成功编译多个类。此外 - 它的错误报告非常具体。使它成为赢家。
采纳答案by ScottS
Appears to be a Compiler Issue
似乎是编译器问题
If you take your original idea of:
如果你采取你最初的想法：
.icon { display:inline-block; position:relative; text-indent:-9999em;}
.icon-l.legend { width:24px; height:24px;}
.icon-white.legend{ background:url(@icon_legend_white) no-repeat;}
.icon-l.arrow_left{background-position: -128px -32px;}
With
和
#something{
.icon;
.icon-l.legend;
.icon-white.legend;
.icon-l.arrow_left;
}
Then assuming you assign something to the variable @icon_legend_white, then the online winless compilercompiles it to the following (where the variable was set to "somepath"):
然后假设您为变量分配了一些东西@icon_legend_white，然后在线 winless 编译器将其编译为以下内容（其中变量设置为“somepath”）：
#something {
display: inline-block;
position: relative;
text-indent: -9999em;
width: 24px;
height: 24px;
background: url("somepath") no-repeat;
background-position: -128px -32px;
}
So if your compiler is throwing an error, then there is obviously some difference between how they are compiling. A solution would then be to switch compilers, or debug the one you are using.
因此，如果您的编译器抛出错误，那么它们的编译方式显然存在一些差异。一种解决方案是切换编译器，或调试您正在使用的编译器。
Update
更新
Some further experimenting with the winless compiler shows that it will only work if the items are defined by classes or ids (which is understandable, as that is what is stated as valid for mixins), but it does have a bug in that it will mixin either or both of .icon-l.legendand .icon-l .legendby a simple mixin call of either one. So the "space" between the second set (making it a child selector) is ignored if called as a mixin. That is certainly wrong for that compiler. Another online compilerdoes not seem to suffer from that bug, but still compiles according to your original attempt.
对 winless 编译器的一些进一步试验表明，只有当项目由类或 id 定义时它才会工作（这是可以理解的，因为这对 mixin 有效），但它确实有一个错误，它会混合任一种或两种.icon-l.legend，并.icon-l .legend通过任何一个简单的mixin电话。因此，如果作为 mixin 调用，则第二组之间的“空间”（使其成为子选择器）将被忽略。这对于那个编译器来说肯定是错误的。另一个在线编译器似乎没有受到该错误的影响，但仍会根据您的原始尝试进行编译。
回答by Marat Tanalin
Mixin name should consist of a single class name, not multiple ones. Create a mixin like this:
Mixin 名称应该由单个类名组成，而不是多个。创建一个像这样的混合：
.icon() {
display: inline-block;
position: relative;
text-indent: -9999em;
&.icon-l.legend {
width: 24px;
height: 24px;
}
&.icon-white.legend {
background: url(@icon_legend_white) no-repeat;
}
&.icon-l.arrow_left {
background-position: -128px -32px;
}
}
and then use it this way:
然后这样使用它：
#something {
/* "Injecting" .icon mixin into #something */
.icon;
}
