Показывать sibling при наведении - Динамические правила css / scss?

#css #sass

Вопрос:

Код, над которым я работаю, выглядит так — вплоть до 50… (Не идеально)

Может быть от 1 до 100 комбинаций anchor / div, но чаще всего в виде однозначных цифр, поэтому почти всегда много избыточных правил CSS.

Мне было интересно, есть ли лучший способ написать CSS / SCSS для этого, а не кодировать для каждого возможного результата вручную? Или единственный способ сделать это — использовать JS?

 .content { display: none; }
.anchor-1:hover ~ .content-1,
.anchor-2:hover ~ .content-2,
.anchor-3:hover ~ .content-3,
.anchor-4:hover ~ .content-4,
.anchor-5:hover ~ .content-5 { display: block; }

У меня также есть код, который здесь изменен: https://jsfiddle.net/rn437pw8/8 /

Ответ №1:

Вы можете использовать простой цикл for в SCSS

 @for $i from 1 through 5 {
  .anchor-#{$i}:hover ~ .content-#{$i} {
    display: block; 
  }
}

JSFiddle