Тройной амперсанд в Sass
Что делают три амперсанда в Sass?
Здесь в контексте styled-components:
const Grid = styled.div`
display: grid;
&&& {
${someFunction}
}
`
Видно в коде здесь: https://github.com/reakit/reakit/blob/website%400.16.0/packages/reakit/src/Grid/Grid.ts#L23
@VadimHulevich Я не уверен, что слежу. Напишите ответ?
Я не уверен, что это действительно sass. Я только что попытался запустить это и получил следующую ошибку: "&" may only used at the beginning of a compound selector.. Может быть, в этом репо где-то указаны какие-то пользовательские параметры компиляции, просто посмотрите сейчас...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
документы говорит, что это переопределяет любые уже заданные стили с более высокой специфичностью в качестве альтернативы использованию !important.
Это влияет на сгенерированные классы CSS.
Я бы добавил, что он генерирует селектор столько раз, сколько раз используется амперсанд (в данном случае три), что дает специфичность CSS для 3 классов (или тегов). Не такой надежный, как важный или идентификатор, но достаточно сильный для большинства методологий CSS.
Технически это не альтернатива !important. Все станет еще хуже, если использовать !important везде, вместо того, чтобы повышать специфичность.
это и родительский селектор повторяется три раза, без причины