What does "&" do in LESS CSS?

Question

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?

Answer 1

I know you can do something like &:hover, but not familiar with showing a class right after it?

It's the same logic here: chaining the inner selector to whatever is represented by the outer selector. Pseudo-classes like :hover and classes like .flex-active behave the same with &.

Compiling that to CSS will result in a rule with the selector

.controls-container .flex-control-nav li a.flex-active

Answer 2

Compiler will replace "&" with current outer selector

This makes it possible to provide different styles for i.e. :hover, :active, :before etc. or any other case as yours.

In your case the inner-most selector would after compilation look like this in resulting CSS file:

.controls-container .flex-control-nav li a.flex-active { ... }

Answer 3

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 a and replaces the & in your code to (in this case) cause the .flex-active class to be conjoined to the a tag...

.controls-container .flex-control-nav li a.flex-active

...instead of a child of the a tag...

.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 after the class .flex-active.