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

Question

[Елена Валентайн]

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

<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 {
        }
      }
    }
  }
}

Это возможно сделать или нет? Может, есть всё таки какие-нибудь варианты?

Comments

[Ankhena]

card-block-inner-box__item

Это жестоко.
А если это БЭМ, то и нельзя.
А если это не БЭМ, то почитайте про БЭМ и сделайте нормально.

А еще, судя по виду, половина оберток просто лишняя.

<div class="card">
  <div class="card__block">
    <div class="card__inner">
      <div class="card__box">
        <div class="card__item">

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

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

     }
}

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

[Михаил]

<div class="card-block__inner">
      <div class="card-block-inner__box">

.card {
  &__block {
    &__inner {

?

[Елена Валентайн]

Ankhena, я знакома с методологией БЭМ, но меня она не интересует. Мне интересно как реализовать всё именно так, как описано в вопросе. Насчёт лишних оберток и жестоко - это пример и в реальности не будет лишних оберток.

[Дима Долготер]

Ankhena, только хотел писать) сам так раньше делал но потом на тостере обосрали и делаю правильно)

[Ankhena]

Елена Валентайн, нагородить через @function и replace, наверное можно.
Но по-моему, тогда проще писать без scss-вложенностей.

[Alex]

Открыл https://www.sassmeister.com/
Ввел

.card {
  &__avatar {
    &__image {
      color: red;
    }
  }
}

.card {
  &__block {
    &__inner {
      &__box {
        &__item {
          color: red;
        }
      }
    }
  }
}

На выходе получил

.card__avatar__image {
  color: red;
}

.card__block__inner__box__item {
  color: red;
}

Так, что собственно не так?

[Ankhena]

Alex,

Так, что собственно не так?

Сравните с классами в разметке

[Елена Валентайн]

Ankhena можете показать пример?

Alex вы неправильно поняли. Мне нужно другое т.е это не то что нужно:

.card__block__inner__box__item {
}

Нужно чтобы при конвертировании SCSS в CSS - было так:

.card-block-inner-box__item {
}

[Ankhena]

Елена Валентайн, посмотрите это https://stackoverflow.com/questions/12728634/strin...

[Alex]

Елена Валентайн, Ну, так так и пишите

.card {
  &-block {
    &-inner {
      &-box {
        &__item {
          color: red;
        }
      }
    }
  }
}

.card-block-inner-box__item {
  color: red;
}

[Алекс Глебов]

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

Жесть
Пишите полные классы, так только писать быстро, поддерживать потом нет. Вложенность в беме осуждается, больше двух не допускается.

Answer 1

[Сергей ZSA]

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

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

.card {
  $parent: ".card";

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

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

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

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

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

Comments

[Елена Валентайн]

Сергей ZSA Я не хочу разводить пустые холивары, поэтому отвечу кратко и по делу: После прочтения комментариев и Вашего ответа, сложилось такое мнение что все "хорошие" разработчики слепо и безмятежно используют БЭМ. Очень странно и это с учетом того, что у него, как и у других методологий и подходов есть свои "огромные" минусы, плюс добавить ко всему этому тот факт, что есть моменты, когда использование данной методологии - станет путём в никуда. БЭМ не панацея. Поэтому не нужно при каждом удобном случае советовать данный инструмент. Я отлично знакома с ним, но мне он не понравился по многим причинам, а насчёт того, что Вы пишите про frontend - смысл ваших слов понятен, но он не к месту. Мы живём не в том мире, где всё идеально. Где каждый разработчик читает документацию, придерживается единого стиля, пишет чистый и аккуратный код и вылизывает его до блеска. Это не то место, где любая задача решается - на раз, два, три. Поэтому давайте не будем выходить за рамки: Вопрос - Ответ. Если я захочу получить критику по своему коду, я обязательно сообщу об этом, но наверное не в этот раз?

И да... Ваш код не работает. Хотя, врать не буду. Он работает если вот тут: $avatar: ".#{$parent}-avatar"; убрать точку. Но тогда конечный результат будет немного другим, хоть и работает, однако это не совсем то, что нужно. Спасибо, конечно, за попытку помочь и направить на путь истинный.

[Сергей ZSA]

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

Полной генерации классов можно добиться путем миксинов, как и писал. Допустим map-get() ещё можно использовать или написать что-то своё. То, что вам якобы надо менять __ на - как говорили в комментах - миксины сделают всё что надо, главное правильно оформить код логически и всё хорошо будет, но как - придется думать. Там и @content может понадобится и может быть (но это не точно) циклы или if/else. Дока по sass прекрасная и вполне можно написать рабочий миксин, было бы желание.