Sass родительский селектор интерполяции

Question

Я пытаюсь понять, почему при интерполяции & в селекторе sass родительский селектор выводится дважды:

.a {
    &__element {
          #{ & }--modifier { // Why does this output .a__element .a__element--modifier ??
            color: blue;
          }
    }
}

.b {
    &__element {
          & &--modifier {
            color: blue;
          }
    }
}

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

.a__element .a__element--modifier {
  color: blue;
}

.b__element .b__element--modifier {
  color: blue;
}

Я бы ожидал, что он просто выведет .a__element--modifier. Есть ли объяснение этому?

Answer 1

.a {
    &__element {
          &--modifier {
            color: blue;
          }
    }
}

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

.a__element--modifier {
  color: blue;
}

Интерполяция просто вставляет значение &, которое в нашем случае .a__element, после чего создается селектор.

Answer 2

& в sass относятся к прямому родительскому селектору. когда вы добавляете его в субселектор, родительский селектор не будет накапливаться в выводе, если вы не используете синтаксис # {} .

, чтобы получить ожидаемый результат использования:

.a {
    &__element {
        &--modifier {
            color: blue;
        }
    }
}