Использование амперсанда внутри закрученного кода темы (SASS)

Question

У меня есть следующий стиль:

.black-theme, .light-theme {
   .popup {
     $root: &;
     color: red;
     &--red {
       #{$root}__close-button {
         fill: red;
       }
     }
   }
}

Генерируется в:

.black-theme .popup--red .black-theme .popup, .black-theme .popup--red .light-theme .popup__close-button, .light-theme .popup--red .black-theme .popup, .light-theme .popup--red .light-theme .popup__close-button {
  fill: red;
}

Как это исправить и получил правильный код:

.black-theme .popup--red .popup__close-button, .light-theme .popup--red .popup__close-button {
  fill: red;
}

Answer 1

Вы также можете использовать этот подход.& - это список списков, ссылающийся на все родительские элементы для текущего селектора, так что вы можете использовать все функции списка в & и легко получить n-го дочернего элемента & вашего выбора (в данном случае второго):

.black-theme, .light-theme {
    .popup {
        $root: nth(nth(&, 1), 2); // Get just the second selector: .popup
        color: red;
        &--red {
            #{$root}__close-button {
                fill: red;
            }
        }
    }
}

Надеюсь, это поможет!

Answer 2

как насчет:

.black-theme, .light-theme {
   .popup {
     $root: '.popup';
     color: red;
     &--red {
       #{$root}__close-button {
         fill: red;
       }
     }
   }
}