Амперсанд (&) как переменная внутри SASS @mixin

Просматривая код 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, когда вне кавычек ". Может ли кто-нибудь объяснить это?

Заранее спасибо!

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
3
0
62
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Причина такого синтаксиса в том, что это какая-то проблема парсинга/совместимости с 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 (&, "&", ""} использование.

Основная цель другая. Дело не в синтаксисе. ОП спросил причину. Это своего рода защита для предотвращения ошибки, которую вы не можете использовать & на root с dartsass — создатели написали об этом в публичном заявлении: github.com/sass/sass/issues/1873

F. Müller 22.11.2022 22:36

Хорошая находка. Да, после прочтения этой ветки становится более ясно, что у них была причина для этого. Я опущу свой ответ, чтобы быть кратким.

Tanner Dolby 22.11.2022 22:40

Вам не нужно. Но я думаю, вы ответили на другой вопрос. Вам решать. Это может быть актуально для других читателей. Может, немного перефразировать?

F. Müller 22.11.2022 22:41

Согласен, может быть уместно оставить при себе. Не стесняйтесь предлагать редактирование, если хотите!

Tanner Dolby 22.11.2022 22:48

Эй, ребята, спасибо за объяснения! Я больше пытался получить использование & как переменную, указанное @TannerDolby. Оба ответа помогли моей цели

artu-hnrq 24.11.2022 17:30

Другие вопросы по теме