Какие методы используются для объединения повторяющихся классов в 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;
}
}
}