Просматривая код Bootstrap 5, я столкнулся со следующим утверждением в файле bootstrap/scss/mixins/_forms.scss:
@mixin form-validation-state-selector($state) {
@if ($state == "valid" or $state == "invalid") {
.was-validated #{if (&, "&", "")}:#{$state},
#{if (&, "&", "")}.is-#{$state} {
@content;
}
} @else {
#{if (&, "&", "")}.is-#{$state} {
@content;
}
}
}
И не мог точно понять использование переменной &
внутри операторов #{if (&, "&", "")}
. Как это работает?
Я знаю, что символ амперсанда (&) используется в ОС SASS для включения родительского селектора (селекторов) при написании в иерархии с отступом. Но я не мог догадаться, как это использовалось в упомянутом утверждении внутри @mixin
, когда вне кавычек "
.
Может ли кто-нибудь объяснить это?
Заранее спасибо!
Причина такого синтаксиса в том, что это какая-то проблема парсинга/совместимости с dartsass. У SASS на протяжении многих лет было много разных инструментов CLI для генерации кода, и были разные уровни строгости, когда дело касалось ошибок.
Похоже, это сделано для предотвращения проблемы. т.е. вы не должны использовать &
на корневом уровне (нет корня корня - возможно, NullPointer или что-то еще при компиляции), потому что это приведет к ошибке, которую вы видите здесь на скриншоте ниже:
Причину можно найти в комментарии над кодом, который вы связали: https://github.com/sass/sass/issues/1873#issuecomment-152293725
Как только вы добавите правило, ошибка исчезнет:
Используемый парсер: https://www.sassmeister.com/
Они используют интерполяцию для части селектора с логикой #{if (&, "&", "")}:#{$state}
.
Функция if ()
работает так же, как if (val, res1, res2)
, где если val истинно, то используется res1, иначе res2, как тернар. Итак, если &
был правдой, например. родительский селектор существует, тогда он будет производить .was-validated &:valid,
с использованием «&», иначе это будет .was-validated :valid
с использованием пустой строки.
Вот демонстрация CodePen, которая демонстрирует #{if (&, "&", ""}
использование.
Хорошая находка. Да, после прочтения этой ветки становится более ясно, что у них была причина для этого. Я опущу свой ответ, чтобы быть кратким.
Вам не нужно. Но я думаю, вы ответили на другой вопрос. Вам решать. Это может быть актуально для других читателей. Может, немного перефразировать?
Согласен, может быть уместно оставить при себе. Не стесняйтесь предлагать редактирование, если хотите!
Эй, ребята, спасибо за объяснения! Я больше пытался получить использование &
как переменную, указанное @TannerDolby. Оба ответа помогли моей цели
Основная цель другая. Дело не в синтаксисе. ОП спросил причину. Это своего рода защита для предотвращения ошибки, которую вы не можете использовать & на root с dartsass — создатели написали об этом в публичном заявлении: github.com/sass/sass/issues/1873