SASS выберите класс, который был прикован к родителю

Question

У меня есть следующий HTML <div class="parent green"></div>

Класс green может быть или не быть добавлен. Это динамично. Это может быть и другое имя.

Как в SASS дать свойства элементу .child parent, когда к нему прикован класс green?

Я пытался:

.parent {
   .child {
      .green & {
        color: green;
      }
   }
}

Это не работает.

Я также попробовал следующее, что работает, но я ищу что-то похожее на sass выше. Код будет повторяться ниже, потому что я должен добавлять child каждый раз для каждого динамического класса.

  .parent {
     &.green {
       .child {        
          color: green;
       }
     }
   }

Я пытаюсь получить такую ​​структуру, если это возможно, с помощью sass:

.parent {
       .child {
          .green & { /* when .parent.green */
            color: green;
          }
          .blue & { /* when .parent.blue */
            color: blue;
          }
          .text-align-right & { /* when .parent.text-align-right */
            text-align: right;
          }
          etc...
       }
    }

Answer 1

& рассматривается как ссылка на родительский селектор в Sass, из-за этого ваш код не работает, так как он ссылается на неправильный селектор.

Использование & напрямую здесь не поможет, но ваша цель может быть достигнута с помощью миксинов, например:

@mixin child($class) {
  &.#{$class} {
    .child {
      @content;
    }
  }
}

.parent {
  @include child(green) {
    color: green;
  }
  @include child(blue) {
    color: blue;
  }
  @include child(text-align-right) {
    text-align: right;
  }
}

Этот фрагмент кода дает результат, который вы хотите получить, вы можете проверить самостоятельно на sassmeister .