“&”在 LESS CSS 中有什么作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14215843/
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
What does "&" do in LESS CSS?
提问by Jared
Trying to figure out what the &does in the below code?
试图弄清楚&以下代码中的作用？
.controls-container {
.flex-control-nav {
li a {
&.flex-active {
filter: none;
background: @color_links!important;
}
}
}
}
I know you can do something like &:hover, but not familiar with showing a class right after it?
我知道你可以做类似的事情&:hover，但不熟悉在它之后立即展示课程？
回答by BoltClock
I know you can do something like
&:hover, but not familiar with showing a class right after it?
我知道你可以做类似的事情
&:hover，但不熟悉在它之后立即展示课程？
It's the same logichere: chaining the inner selector to whatever is represented by the outer selector. Pseudo-classes like :hoverand classes like .flex-activebehave the same with &.
这里的逻辑相同：将内部选择器链接到外部选择器所表示的任何内容。伪类 like:hover和类 like 的.flex-active行为与&.
Compiling that to CSS will result in a rule with the selector
将其编译为 CSS 将生成带有选择器的规则
.controls-container .flex-control-nav li a.flex-active
回答by Robert Koritnik
Compiler will replace "&" with current outer selector
编译器将用当前的外部选择器替换“&”
This makes it possible to provide different styles for i.e. :hover, :active, :beforeetc. or any other case as yours.
这使得能够提供即不同的风格:hover，:active，:before等，或其他任何情况下，你的。
In your case the inner-most selector would after compilation look like this in resulting CSS file:
在你的情况下，最里面的选择器在编译后在生成的 CSS 文件中看起来像这样：
.controls-container .flex-control-nav li a.flex-active { ... }
回答by ScottS
The &appends the parent nesting structure where ever the &may occur. So as others have noted, putting the &in your example takes the full nested string of .controls-container .flex-control-nav li aand replaces the &in your code to (in this case) cause the .flex-activeclass to be conjoinedto the atag...
该&追加在以往任何时候的父嵌套结构&可能发生。因此，正如其他人所指出的那样，将 放入&您的示例中会采用完整的嵌套字符串 of.controls-container .flex-control-nav li a并替换&您的代码中的 以（在这种情况下）导致.flex-active类连接到a标签...
.controls-container .flex-control-nav li a.flex-active
...instead of a childof the atag...
...而不是一个孩子的的a标签...
.controls-container .flex-control-nav li a .flex-active
If you just think of it as a "string replacement" for a selector, it will help you visualize. For instance this (note where I have put the &)...
如果您只是将其视为选择器的“字符串替换”，它将帮助您进行可视化。例如这个（注意我把&）...
.controls-container {
.flex-control-nav {
li a {
.flex-active & {
filter: none;
background: @color_links!important;
}
}
}
}
...would produce this selector...
...会产生这个选择器...
.flex-active .controls-container .flex-control-nav li a
...as it would append the nested structure afterthe class .flex-active.
...因为它会在 class之后附加嵌套结构.flex-active。
