Как правильно переписать css в scss с нестингом?

Question

[tostershmoster]

Код

.project-details__container.project-details__container__loaded {
  height: 100%;
  padding: 20px;
  opacity: 1;
  transition: all 3s ease-in-out;
}

.project-details__cover.project-details__cover_loaded {
  opacity: 1;
  transition: all 5s ease-in-out;
}

не работает в следующем виде

.project-details {
  &__container &__container__loaded {
    height: 100%;
    padding: 20px;
    opacity: 1;
    transition: all 3s ease-in-out;
  }

  &__cover &__cover_loaded {
    opacity: 1;
    transition: all 5s ease-in-out;
  }
}

если убрать пробелы &__container&__container__loaded и &__cover&__cover_loaded будет ошибка

Module build failed (from ./node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js):
SassError: "&" may only used at the beginning of a compound selector.

&__container&__container__loaded {
^

Comments

[Ankhena]

Добавить вложенность скобочек
Но селекторы выглядят сомнительно. Я бы попробовала подумать о том, как избавится от повышения специфичности и откуда вообще появилась эта необходимость.

Answer 1

[its2easyy]

.project-details__container.project-details__container__loaded {}
.project-details__cover.project-details__cover_loaded {}

=>

.project-details{
  $this: &;
  &__container{
     &#{$this}__container__loaded{

    }
  &__cover{
       &#{$this}__cover_loaded{

       }
    }
  }

Но вообще тут что то не то со специфичностью, по нормальному это должно было бы быть как-то так

.project-details {
  &__container{
     &__loaded{
    }
  }
}