Меньше переменных из разных источников

Question

У меня есть набор файлов .less

они импортированы в theme.less нравится это

    @import "a.less";
    @import "b.less";
    @import "c.less";

и компилируется в theme.css

У меня на 2 файла меньше, что определяет одни и те же переменные с разными значениями.

    vars_blue.less
    vars_green.less

это для темы. a.less, b.less & c.less ссылаются на эти переменные. Если я импортирую vars_blue.less в более чем 3 файлах меньше, я получу синюю тему.

Я пытаюсь создать динамическую тему, но избегаю включения переменных в более чем 3 файла, вместо этого в theme.less

    @import "vars_blue.less";
    @import "a.less";
    @import "b.less";
    @import "c.less";

, поскольку переменные используются в 3 дочерних файлах .less выше, не поддерживаются. ожидается его импорт в каждый файл .less, где он используется.

Как создать 2 theme.less, как

    theme_blue.less

    @import "vars_blue.less";
    @import "a.less";
    @import "b.less";
    @import "c.less";

и

    theme_green.less

    @import "vars_green.less";
    @import "a.less";
    @import "b.less";
    @import "c.less";

Answer 1

Я не знаю, как использовать less, поэтому мой ответ может быть очень плохим.

В таком случае, как насчет того, чтобы сделать это так:

вы создаете theme_vars.less, содержащий только:

@import "vars_green.less";

или же

@import "vars_blue.less";

затем в a.less, b.less и c.less ваш старт по:

@import "theme_vars.less";

таким образом, когда вам нужно сменить тему, нужно изменить только theme_vars.less

(вроде как абстрактный шаблон фабричного дизайна )