Helen_Glitch
@Helen_Glitch
Front-end Developer

Как реализовать вложенность классов в SCSS?

Есть примерно такая разметка:

<div class="card">
  <figure class="card__avatar">
    <im class="card-avatar__image" src="" />
  </figure>
</div>


Как правильно обратиться к дочернему элементу селектора card__avatar если имя дочернего элемента меняется вот таким образом card-avatar__image ? т.е при попытке обратиться к нему вот так:

.card {
  &__avatar {
    &__image {
    }
  }
}


Нет никаких результатов. Есть какой-нибудь нормальный способ это решить сохраняя синтаксис SCSS? Интересует вариант при котором можно будет делать более глубокую вложенность, т.е например что-то такое:

<div class="card">
  <div class="card__block">
    <div class="card-block__inner">
      <div class="card-block-inner__box">
        <div class="card-block-inner-box__item">

        </div>
      </div>
    </div>
  </div>
</div>


.card {
  &__block {
    &__inner {
      &__box {
        &__item {
        }
      }
    }
  }
}


Это возможно сделать или нет? Может, есть всё таки какие-нибудь варианты?
  • Вопрос задан
  • 165 просмотров
Пригласить эксперта
Ответы на вопрос 1
serjikz
@serjikz
web-developer
Вам уже высказали в комментариях, что подход ужасен и это всё неправильно и тд и тп. Но если вам таки очень прям очень и вот очень хочется писать плохой код - никто этого делать не запретит.

Какое может быть решение - вы можете сделать переменную внутри родителя. То есть вот так:

.card {
  $parent: ".card";

  &__avatar {
    $avatar: ".#{$parent}-avatar";

    #{$avatar}__image {
        // ну и далее я думаю подход ясен
    }
  }
}


Никто не спорит, что может быть миксин зайдет как-то, но сейчас не хочется с этим возиться (и смысла не вижу вообще).

Можно все переменные возможных названий повтыкать как раз в самое начало и из них комбинировать всё, что надо (как раз на основании этого можно и миксин пробовать пилить с циклом возможно и тд и тп).

Но честно - лучше воспользоваться БЭМ и всем, что он пропагандирует. Если вы у себя в профиле пишите, что вы front-end - пожалуйста, ведите себя как front-end и не пишите плохой код.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы