Блог

В файле less у меня есть два разных импорта переменных цветовых кодов, на данный момент я скрываю один импорт при создании другого. Я хотел бы изменить подход, например, импортировать один файл и динамически передавать мои файлы с меньшим количеством цветов в файл меньшего размера с помощью Javascript.

Если вы хотите передать переменные в файл less с помощью Javascript, есть два способа:

1. вы могли бы использовать javascript для ввода таблицы стилей CSS с обновленными переменными / свойствами CSS или использовать javascript для прямой настройки переменных / свойств CSS.
2. предоставление МЕНЬШЕГО КОЛИЧЕСТВА таблиц стилей и компиляция их в браузере пользователя во время выполнения или перекомпиляция их с помощью less.modifyVars .Позволяет изменять меньшее количество переменных во время выполнения. При вызове с новыми значениями файл Less перекомпилируется без перезагрузки.

Простое базовое использование:

         less.modifyVars({
          '@buttonFace': '#5B83AD',
          '@buttonText': '#D9EEF2'
        });
  

Более подробная информация:http://lesscss.org/usage/#using-less-in-the-browser-modify-variables

Редактировать:

Если вам нужно импортировать ваш файл less в js:

 import '../less/style.less'
  

или, если вам нужно импортировать ваш файл less в родительский файл less:

 @import "../less/style.less"
  

Используйте миксины для условного импорта

 @bt-color-variation: light;

@import "color-variations/@{bt-color-variation}/global";
@import "color-variations/@{bt-color-variation}/variables";