уменьшить цветовую тему CSS

Я унаследовал проект с тоннами CSS, и мне было поручено изменить его, чтобы можно было легко изменить цветовую палитру.

Я сразу подумал об использовании препроцессора CSS, меньше пробовал и легко переключал цвета для переменных, поэтому мне просто нужно определить базовый цвет и можно переключить цветовую тему.

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

Я хочу получить один файл с большим количеством импортов (в основном по одному на компонент или набор компонентов), и в этом файле, когда я импортирую colors-red.less вместо colors-blue.less все импортированные компоненты сразу после использования красной палитры, например, скомпилированная тема будет красной, а не синей.

Проблема, с которой я столкнулся, заключается в том, что файлы компонентов не получают «глобальные переменные» с определениями цвета, поэтому я не могу скомпилировать базовый файл, который импортирует эти файлы.

Я читал, что есть возможность использовать "частичные" (файлы, начинающиеся с _, которые не компилируются независимо, а импортируются, а затем компилируются), но мой компилятор, похоже, игнорирует эту функцию, а плагин eclipse, который я использую для редактирования и проверка меньшего количества файлов также жалуется на то, что переменные цвета не определены для этих частичных файлов.

Как я могу заставить работать партиалы? Есть ли лучший подход для выполнения этой задачи?


themes css less partials
person NotGaeL    schedule 09.02.2015    source источник
comment
При использовании Less вы создаете в основном один файл проекта. Этот файл проекта импортирует другие ваши файлы (называемые вами частичные файлы). Вы только компилируете свой файл проекта в CSS. Какие файлы компилируются, зависит от вашего процесса сборки. В качестве примера возьмем бутстрап, будет скомпилирован только файл bootstrap.less.   -  person Bass Jobsen    schedule 10.02.2015
comment
Да, только весь импорт компилируется отдельно, а затем объединяется в один выходной CSS вместо того, чтобы объединять и компилировать. Вот почему мой проект не компилируется: мне нужно, чтобы переменные, объявленные в импортированном файле, были видны для всех последующих операций импорта.   -  person NotGaeL    schedule 10.02.2015
comment
Less использует отложенную загрузку и последнее объявление выигрывает, поэтому вы можете определять свои переменные позже, см. lesscss.org/features/#variables-feature-lazy-loading   -  person Bass Jobsen    schedule 10.02.2015
comment
По-прежнему, они не будут определены в импортированных файлах, только в главном файле, поэтому компиляция будет прервана для импортированных файлов. Вы понимаете, о чем я?   -  person NotGaeL    schedule 10.02.2015

Ответы (1)


arrow_upward
1
arrow_downward

По-прежнему они не будут определены в импортированных файлах, только в главном файле, поэтому компиляция будет нарушена для импортированных файлов. Вы понимаете, о чем я?

Неа? пример:

mixins.less:

.mixin()
{
   color: @color;
}

variables.less:

@color: orange;

project.less:

@import "mixins";
@import "variables";
p {
.mixin();
}

Сейчас запущено lessc project.less выходов:

p {
color:orange;
}

Теперь я перехожу к содержанию project.less следующим образом:

@import "mixins";
@import "variables";
p {
.mixin();
}
@color: red;

Затем запускается lessc project.less выводит:

p {
color:red;
}
person Bass Jobsen    schedule 10.02.2015
comment
Превосходно! Оказывается, это проблема в настройках плагина eclipse для компилятора. каким-то образом плагин компилировал все, а не только основной файл, поэтому он останавливался из-за ошибки перед компиляцией основного файла, и поэтому я вообще не получал скомпилированный вывод (мне все еще нужно выяснить, как избежать того, чтобы редактор выдал мне неопределенную ошибку в каждом частичном файле в каждой строке я использую эти переменные, но я могу с этим жить). Большое спасибо за терпение ;-) - person NotGaeL; 10.02.2015