Переопределение переменных в нескольких файлах LESS

У нас есть платформа, которая содержит несколько приложений в одном интерфейсе. Существует одна общая таблица стилей и отдельные таблицы стилей для каждого приложения из соображений производительности. Вся эта платформа брендирована для нескольких поставщиков, у каждого свои цвета и т. д. Мы делаем это, загружая другую таблицу стилей для данного брендинга, которая просто содержит переопределения стилей по умолчанию.

Теперь мы думаем о внедрении LESS для улучшения и организации наших таблиц стилей. Но мы изо всех сил пытаемся найти чистое решение для настройки переменных для каждого бренда.

Вот структура нашего проекта:

platform/
    css/
        general.css     (general styles for all applications)
        app1.css        (specific styles for application 1)
        app2.css        (specific styles for application 2)
        ...
        branding1.css   (color overrides for branding 1)
        branding2.css   (color overrides for branding 2)
        ...

С LESS мы бы подумали об этой структуре:

platform/
    css/
        variables.less  (containing default colors, etc.)
        general.less    (general styles for all applications)
        app1.less       (specific styles for application 1)
        app2.less       (specific styles for application 2)
        ...
        branding1.less  (variables overrides for branding 1)
        branding2.less  (variables overrides for branding 2)
        ...

Теперь, как мы можем легко применить переопределение брендинга ко всем таблицам стилей?

На данный момент мы нашли создание файлов less для всех таблиц стилей, например, для general.less для создания general.branding1.less:

@import "general.less";
@import "branding1.less";

Это создает желаемый результат для общих стилей брендинга 1, и, конечно же, мы можем сделать это для каждой таблицы стилей приложения. Но это приведет к n * m файлам (приложения * брендинг) только с двумя такими строками импорта. Это не похоже на хорошее решение (не говоря уже о дополнительной обработке для ссылки на эти файлы в заголовке HTML) - разве нет ничего лучше?

Примечание. Мы используем Web Essentials для предварительной обработки файлов перед развертыванием. Предварительная обработка на стороне клиента невозможна.


css asp.net less branding
person jor    schedule 01.06.2015    source источник
comment
также см.: stackoverflow. ком/вопросы/30207921/   -  person Bass Jobsen    schedule 01.06.2015

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете использовать dotless для обслуживания меньшего количества файлов и пропустить шаг компиляции Web Essentials — предварительная обработка все равно будет на стороне сервера. Обработчик HTTP Dotless принимает значения переменных из параметров строки запроса, поэтому в таблице стилей вашей точки входа вы можете сделать:

@import "@{brandName}.less";

и ссылайтесь на него как на

<link rel="stylesheet" type="text/css" href="main.less?brandName=foo" />
person Rytmis    schedule 01.06.2015
comment
Звучит интересно. Можно ли как-то ограничить допустимые значения, чтобы злоумышленники не могли импортировать произвольно меньше файлов? - person jor; 02.06.2015
comment
Вы можете использовать защиту, чтобы убедиться, что распознается только набор известных брендов. Это немного сложно, но выполнимо. Помимо этого, вы можете написать подключаемый модуль функции, который будет использовать что-то вроде getBrandName(@brandName) и будет возвращать только известные торговые марки или значение по умолчанию. - person Rytmis; 02.06.2015