Что делает "&" в LESS CSS?

Попытка выяснить, что делает & в приведенном ниже коде?

  .controls-container  {
        .flex-control-nav  {
            li a  {
                &.flex-active  {
                    filter: none;
                    background: @color_links!important;
                }
            }
        }
    }

Я знаю, что вы можете сделать что-то вроде &:hover, но не знакомы с показом класса сразу после него?

Ответы

Ответ 1

Я знаю, что вы можете сделать что-то вроде &:hover, но не знакомы с показом класса сразу после него?

Здесь та же логика: привязка внутреннего селектора к тому, что представлено внешним селектором. Псевдоклассы типа :hover и классы типа .flex-active ведут себя одинаково с &.

Компиляция того, что для CSS приведет к правилу с селектором

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

Ответ 2

Компилятор заменит "&" с внешним переключателем тока

Это позволяет предоставлять разные стили для i.e :hover, :active, :before и т.д. или любого другого случая как ваш.

В вашем случае самый внутренний селектор после компиляции будет выглядеть в результате в файле CSS:

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

Ответ 3

& добавляет родительскую структуру вложенности, где всегда может быть &. Так, как отметили другие, при вводе & в вашем примере выполняется полная вложенная строка .controls-container .flex-control-nav li a и заменяется & в вашем коде на (в данном случае), поэтому класс .flex-active будет соединен в тег a...

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

... вместо дочернего тега a...

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

Если вы просто думаете об этом как о "замене строки" для селектора, это поможет вам визуализировать. Например, это (обратите внимание, где я положил &)...

.controls-container  {
    .flex-control-nav  {
        li a  {
            .flex-active & {
                filter: none;
                background: @color_links!important;
            }
        }
    }
}

... создаст этот селектор...

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

... поскольку он добавит вложенную структуру после класса .flex-active.