Попытка выяснить, что делает & в приведенном ниже коде?
.controls-container {
.flex-control-nav {
li a {
&.flex-active {
filter: none;
background: @color_links!important;
}
}
}
}
Я знаю, что вы можете сделать что-то вроде &:hover, но не знакомы с показом класса сразу после него?
Я знаю, что вы можете сделать что-то вроде
&:hover, но не знакомы с показом класса сразу после него?
Здесь та же логика: привязка внутреннего селектора к тому, что представлено внешним селектором. Псевдоклассы типа :hover и классы типа .flex-active ведут себя одинаково с &.
Компиляция того, что для CSS приведет к правилу с селектором
.controls-container .flex-control-nav li a.flex-active
Это позволяет предоставлять разные стили для i.e :hover, :active, :before и т.д. или любого другого случая как ваш.
В вашем случае самый внутренний селектор после компиляции будет выглядеть в результате в файле CSS:
.controls-container .flex-control-nav li a.flex-active { ... }
& добавляет родительскую структуру вложенности, где всегда может быть &. Так, как отметили другие, при вводе & в вашем примере выполняется полная вложенная строка .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.