Как правильно написать scss по моему шаблону?

Question

[nikmil]

Здравствуйте, столкнулась с одной проблемкой.
У меня темовая страничка, вот примерный html

<div class='theme-1'>
  <div class='main'>
    <div class='main-child >
      <div class='main-child -img></div>
     </div>
  </div>
</div>

.theme 1 {
  .main {
    &-child {
       &:hover &-img {}  <---- 
    }
 }
}

Проблема в том, что в scss
наследуется все хорошо до одного момента где ховер на child чтобы изменить img


<- он наследует так

А нужно так

<element class="theme-1>
<element class="main-child" :hover>
  …
    <element class="main-child-img">

Comments

[Сергей delphinpro]

Нужно понять, что означает амперсанд. Потом и решение придет в голову.

[Ankhena]

Раз есть намек на наличие разных тем, то вам помогут кастомные свойства.

Т.е. вы сначала пишете для блока правила с участием кастомных свойств.
А внутри темы уже не переписываете заново всю гармошку селекторов, а только меняете кастомные свойства.

Типа того: https://jsfiddle.net/nk2mhw6p/
Причем значения передаются в псевдо и просто наследуются детьми. Переопределяются в @media. Доступны из JS (это вообще вызывает у меня восторг, в сочетании с псевдо)

У меня секции с разными темами, вы, по всей видимости, будете менять класс у body или контейнера.

Answer 1

[Сергей delphinpro]

.main {
  $this: &;

  .theme_1 & {
    #{$this}-child:hover #{$this}-img {
    }
 }
}

.main {
  $this: &;

  @at-root {
    .theme_1 {
      #{$this}-child:hover #{$this}-img {
      }
    }
  }
}

Comments

[nikmil]

Спасибо помогло,
А если будет больше вложенностей то придется писать

:hover #{$this}-child-child-child__img ?

[Сергей delphinpro]

nikmil, не должно быть глубокой вложенности. Это лишние сложности, в том числе с чтением написанного кода. Рекомендуемая максимальная глубина - 1-2 уровня, включая медиазапросы. Как вариант, могу порекомендовать БЭМ-подход в именовании классов.

[Сергей delphinpro]

А вообще для темизации удобнее использовать css переменные.

:root {
  --color: white;
}

body.dark {
  --color: black;
}

.some-block {
  color: var(--color);
}

И всё. В блоке никакого лишнего кода, тема переключается простым навешиванием единственного класса на body.