Показать весь Sass-вложенный путь/уровни вверху?

Я кодирую несколько цветовых схем (в Sass), где один супер-пупер-родительский класс управляет всеми дочерними элементами. И я продолжаю находить себя на таких экранах:

Показать весь Sass-вложенный путь/уровни вверху?

... думая про себя: «Теперь, в какой цветовой схеме я сейчас?».

В настоящее время я исправляю это, разбивая код на несколько файлов, что вроде как решает проблему, но не идеальным способом. Это означает много переключения файлов. А также, если у меня есть .open- / .closed-класс или .missing- ​​/ .present-класс, то я должен найти это и «спуститься по дереву», чтобы убедиться, что я делаю изменение в правильном месте. Довольно утомительно!

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

Пример того, что я пытаюсь найти, это то, что если я помещу курсор внутрь ul.menu-main__current-menu-item__missing li a {, тогда он отобразит строку состояния вверху:

#header >> &.green-colorscheme >> ul.menu-main__current-menu-item__missing li a

Могу ли я как-то этого добиться? Если нет, то как мне не потеряться в моем коде?

Попытки

Ни один из них не решает проблему так хорошо, как мое предложение.

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
0
22
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

IDE уже умеет это делать для Sass/SCSS (начиная с 2018.1 или около того, я не помню точного номера версии; для HTML/PHP это можно было сделать уже давно).

Убедитесь, что вы включили Breadcrumbs для языка Sass в Settings (Preferences on macOS) | Editor | General | Breadcrumbs

Другие вопросы по теме