Как правильно по бему обращаться к классу элемента scss внутри модификатора?

Question

[godsplan]

Может я конечно вообще не понял суть и так делать в принципе нельзя, но вот пример:

<div class="block block--small">
  <div class="block__elem">
    
  </div>
</div>

.block {
  &--small {
    ....???
    .block__elem { // Это ок?
      height: 100px;       
    }
  }
  &__elem {
    width: 200px;
    height: 200px;
    background: red;
  }
}

Comments

[Виталий Першин]

Я бы вообще не применял в данном случае вложенность, а использовал бы css-переменную

Answer 1

[Ankhena]

.block {
  $this: &;
  &--small {
    #{$this}__elem {
      height: 100px;
    }
  }
  &__elem {
    width: 200px;
    height: 200px;
    background: red;
  }
}

Но вообще, элементы через & делают поиск по проекту в 2 итерации вместо одной.
Не люблю, когда так.

Comments

[godsplan]

есть же сурс мапы.
с $this какой то перегруз помоем нет?

[Ankhena]

godsplane, по-моему, тоже.
Но вы спросили, я рассказала.

Source map не работает, например, после группировки media. Да и толку от него, ну сказалон мне, что .block__item находится в файле block.scss или в каком-то ещё.
Нужно сначала открыть это файл и в нем искать __item, который там может быть и не один. Хорошо, если проект всё таки нормально разбит на блоки, а не так, как мне тут недавно попалось...

Вместо того чтобы просто найти этот селектор в одно телодвижение.

Но дело ваше.

Answer 2

[Сергей delphinpro]

.block {
  &--small {
    ....???
  }
  &--small &__elem { // Это ок!
    height: 100px;       
  }
  &__elem {
    width: 200px;
    height: 200px;
    background: red;
  }
}

Comments

[godsplan]

А как в этой ситуации:

.block {
   &__item {
    &:nth-child(2) {
      // Тут мне нужно обратиться к заголовку допустим
      .block__title {
        
     }
   }
 }
}

[Сергей delphinpro]

godsplane,
так же

.block {
   &__item:nth-child(2) &__title {
   }
}

[godsplan]

Сергей delphinpro, извиниюсь, а если hover внутри хавера меняются несоклько элментов?Под каждый писат отедльный хавер?

[Сергей delphinpro]

godsplane, да. или можете использовать вариант, предложенный выше #{$this}

[godsplan]

Сергей delphinpro,

.block {
  padding: 2rem;
  background: red;
  &:hover & {
    &__title {
      display: none;
    }
    &__desc {
      color:green;
    }
  }
}

Нашел такую реализацию. Помоему выглядит чище