Какие методы используются для объединения повторяющихся классов в SASS, которые имеют различную иерархию?

контекст

Я был нанят в проект, который имел существующий файл SASS / SCSS. Тем не менее, у них, похоже, не было плана, как их структурировать, поэтому существует много дублирующих классов.

Эта проблема

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

пример

.nav {
     foo: bar;
}

Далее в документе в каком-то случайном месте:

.nav {
    p {
        foo: bar;
    }
}

Другой пример

.flexslider {
    .slides {
        foo: bar;
    }
}

Затем позже вы найдете:

.carousel {
    li {
        foo: bar;
    }
}

Когда это должно быть:

.flexslider {
    .carousel {
        .slides {
            foo: bar;
        }
        li {
            foo: bar;
        }
    }
}

Или же:

.flexslider {
    .carousel {
        li.slides {
            foo: bar;
        }
    }
}

0 ответов

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