МЕНЬШЕ CSS - не изобретать велосипед

Question

Под «колесом» я подразумеваю вложенный путь выбора.

Я преобразовал довольно большой файл CSS в МЕНЬШЕ, по большей части, правила вложения в порядке DOM. Однако некоторые из моих стилей переопределяются. По сути, все «простые» стили были вложенными, что делало их правила вывода CSS чрезвычайно специфичными (что я и хочу). Что не так уж и конкретно, так это правила, в которых к родительским элементам прикреплены классы. Пример:

Обычные вложенные правила:

      .grandparent {
  some: style;

  .parent {
     other: style;

     .child {
       you: get;

       .grandchild {
          the: picture;
       } 
     }
   }
}

Итак, проблема, с которой я столкнулся, - это добавление стилей к внуку, если у бабушки и дедушки есть определенный класс. Что-то вроде:

      .grandparent.visiting .grandchild {
  visibility: hidden;
}

Есть ли способ аккуратно добавить .visiting к большой иерархии, которую я уже построил? Или мне нужно переделать весь порядок вложения для всех селекторов дочерних элементов, на которые влияет .grandparent.visiting?

Не уверен, что это новичок. Я только начал с LESS пару выходных назад. Но я не могу найти никаких решений с использованием:not, и селектор & (каким бы превосходным он ни был), похоже, здесь тоже не помогает.

Answer 1

Вы можете сослаться на текущий селектор, используя символ &, а затем написать селекторы после него, как это было в одной строке.

      .grandparent {
  some: style;

  &.visiting {
    .grandchild{ 
        visibility: hidden;
    }
  }
}