Можно ли добавить &: after к родителю в SASS?

Question

Я пытаюсь очистить некоторый код SCSS, который я написал ранее, тогда мне было наплевать на избыточный код, поэтому я писал такие вещи:

.example {
  .child {
    .grandchild {
      //CSS CODE
    }
  }
  &:nth-child(odd) {
    .child {
      .grandchild {
        //CSS CODE
      }
    }
  }
}

Теперь я рефакторинг кода, и я пытаюсь сделать что-то вроде этого:

.example {
  .child {
    .grandchild {
      //CSS CODE
      &:nth-child(odd) & {
        //CSS CODE
      }
    }
  }
}

, который компилируется во что-то вроде этого:

.example .child .grandchild:nth-child(odd) .example .child .grandchild 

Но я хочу вот что:

.example:nth-child(odd) .child .grandchild

Возможно ли это с SCSS или я должен придерживаться моего предыдущего кода?

Answer 1

Вставка нового модификатора в середине правила на самом деле не является функцией Sass.Как правило, вы можете добавлять вещи только в начало или в конец.Кроме того, директива @ at-root позволяет вам «сбрасывать» текущий контекст.

Таким образом, вы всегда должны упорядочивать свой код так, чтобы куски были «разделены», чтобыдля вставки в начале или конце.

Так что-то вроде этого может работать:

.example {
  color: yellow;

  @at-root {
    .child {
      .grandchild {
        .example & {
          color: red;
        }

        .example:nth-child(odd) & {
          color: blue;
        }
      }
    }
  }
}

Компилируется в:

.example {
  color: yellow;
}
.example .child .grandchild {
  color: red;
}
.example:nth-child(odd) .child .grandchild {
  color: blue;
}