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