#javascript #css #less
#javascript #css #Меньше
Вопрос:
В файле less у меня есть два разных импорта переменных цветовых кодов, на данный момент я скрываю один импорт при создании другого. Я хотел бы изменить подход, например, импортировать один файл и динамически передавать мои файлы с меньшим количеством цветов в файл меньшего размера с помощью Javascript.
Ответ №1:
Если вы хотите передать переменные в файл less с помощью Javascript, есть два способа:
- вы могли бы использовать javascript для ввода таблицы стилей CSS с обновленными переменными / свойствами CSS или использовать javascript для прямой настройки переменных / свойств CSS.
- предоставление МЕНЬШЕГО КОЛИЧЕСТВА таблиц стилей и компиляция их в браузере пользователя во время выполнения или перекомпиляция их с помощью
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";
Комментарии:
1. Спасибо за предложения. Здесь файл less не используется на стороне браузера. Просто создайте файлы css локально, а затем разверните. Использование переменных css также может быть добавлено только к файлам css. Но я хочу передать другой файл less color для динамического импорта с помощью Java script. Хотелось бы знать, есть ли возможности. Спасибо.
2. @ManjulaDhamodharan Зачем вам это нужно? вы могли бы включить дочерние компоненты в сам файл less. Отредактированный ответ на вопрос, как вы можете импортировать файл less в less или javascript.
3. У меня есть 2 разных переменных цветовых кодов в разных файлах less, и я генерирую каждую из них с каждым цветом темы. Как я могу использовать их оба, только последний из цветов с меньшим количеством импорта компилируется поверх записи предыдущего.
4. @ManjulaDhamodharan итак, вам нужен условный импорт на основе цвета?
5. ДА. Имея все мои файлы less color в цикле, я могу импортировать все файлы generate css соответственно.