Вложен ли пост-фиксированный амперсанд и инвертированный селектор SASS?

Question

Я пытаюсь ухватить следующий пример, который я нашел на паутинах. Похоже, что после исправления амперсанда SASS инвертирует вложенность?

.MyComponent {
  &-title {
    .MyComponent--xmasTheme & {
    }
  }

  &-content {
    .MyComponent--xmasTheme & {
    }
  }
}

// Compiles to
.MyComponent-title {}
.MyComponent--xmasTheme .MyComponent-title {}
.MyComponent-content {}
.MyComponent--xmasTheme .MyComponent-content {}

Answer 1

Я хочу сказать, что комментарии @Arkellys ответили на это за меня, рассматривая амперсанд SASS как переменную для родительского элемента вложенного селектора. Поэтому, когда амперсанд пост-фиксирован во вложенном селекторе, вот где SASS выводит родительский селектор.

Answer 2

&-title - это функция SASS, позволяющая настроить синтаксис. Он был введен в версии 3.3.0rc3 и заменяет старый синтаксис @at-root #{&}-title.

https://sass -lang.com / Documentation / style-rules / parent-selector # добавление-суффиксы

Интересные статьи об этой функции:

• https://unakravets.tumblr.com/post/78744593423/sass-snippets-the-almighty-ampersand
• http://alwaystwisted.com/articles/2014-02-27-even-easier-bem-ing-with-sass-33
• https://www.sitepoint.com/structuring-css-class-selectors-with-sass/

Итак, этот синтаксис:

.MyComponent {
  &-title {
    color:blue;
  }
}

создайте этот вывод:

.MyComponent-title {
  color: blue;
}

, а не:

.MyComponent .MyComponent-title {
  color: blue;
}

PS Для созданияВ последнем выводе вы можете написать амперстенд с синтаксисом интерполяции:

.MyComponent {
  #{&}-title {
    color:blue;
  }
}