Sass: возможно ли создать селектор типа «.namespace-blockA + .namespace-blockB» при объявлении «namespace-blockB»?

Question

Нам нужно объявить верхнее поле для .Article-UnorderedList, когда оно идет после .Article-Paragraph. Мы можем написать селектор .Article-Paragraph+.Article-UnorderedList, но он не подходит для кода ниже (в комментариях я написал почему).

.Article

  &-Paragraph
    font-size: 16px
    line-height: 18px
    // In this line, we don't not know about ".Article-UnorderedList" yet.
    // There could be a lot of unknown at advance selectors like ".Article-UnorderedList" below.
    // So, we can't write "&.+Article-UnorderedList" here.

  // Article-UnorderedList declaration begins here. Now we know about it and also about ".Article-Paragraph"
  // So, this selector MUST know how to shift from ".Article-Paragraph"
  &-UnorderedList

    list-style-type: disc
    list-style-position: outside
    padding-left: 20px

    >li
      line-height: 18px
      &:not(:first-child)
        margin-top: 4px

    // We need to declare the margin from .Article-Paragraph
    // Some way to create .Article-Paragraph+.Article-UnorderedList HERE?

  // Works but lame: we need to exit from &-UnorderedList level and re-declare styles
  // for .Article-Paragraph
  &-Paragraph+.Article-UnorderedList
    margin-top: 16px

Answer 1

Вы можете установить глобальную переменную в родительском селекторе и затем использовать ее в элементе UnorderedList.

.Article
  &-Paragraph
    $parent: & !global
    font-size: 16px
    line-height: 18px

  &-UnorderedList
    list-style-type: disc
    list-style-position: outside
    padding-left: 20px

    >li
      line-height: 18px
      &:not(:first-child)
        margin-top: 4px

    #{$parent} + &
      margin-top: 16px

Ваш результат:

.Article-Paragraph {
  font-size: 16px;
  line-height: 18px;
}
.Article-UnorderedList {
  list-style-type: disc;
  list-style-position: outside;
  padding-left: 20px;
}
.Article-UnorderedList > li {
  line-height: 18px;
}
.Article-UnorderedList > li:not(:first-child) {
  margin-top: 4px;
}
.Article-Paragraph + .Article-UnorderedList {
  margin-top: 16px;
}