Современное наследование переменных scssCSS

Разбираемся в CSS
Ответить
Anonymous
 Современное наследование переменных scss

Сообщение Anonymous »

Нам необходимо модернизировать нашу тему, чтобы избежать ее устаревания и проблем с безопасностью. Таким образом, мы обновляем многие пакеты узлов, включая webpack и sass. У меня возникли проблемы с наследованием.
Меня очень смущает то, как вы должны наследовать переменные «новым» способом выполнения scss. Мы полагались на старый способ создания таблиц стилей для конкретной темы, сохраняя при этом только по одному для каждой части. Я больше не вижу способа сделать это.
Вот как мы это делаем сейчас

Код: Выделить всё

scheme_alpha.scss (contains variables for this color scheme Ex: $color_primary)
\_ _styles.scss (contains all the partials)
\_ _header.scss (partial for the header, uses variables from the scheme)
_footer.scss (partial for the footer, uses variables from the scheme)
_a_dozen_other_partials_or_more.scss
scheme_beta.scss
\_ _styles.scss
scheme_delta.scss
\_ _styles.scss
scheme_gamma.scss
\_ _styles.scss
etc.
Каждая из схем построена с использованием одного и того же _styles.scss и одних и тех же частей, с изменением только цветовой схемы для каждого файла CSS. В итоге мы получаем схема_alpha.css, схема_бета.css, схема_дельта.css и схема_gamma.css. В нашем приложении мы разрешаем пользователям выбирать, какую схему использовать.
Теперь кажется, что мы не можем вкладывать такие файлы и ожидать наследования. Либо все частичные элементы должны иметь прямую ссылку на theme_whatever.scss, либо наследование может остаться, и переменные необходимо вызывать как theme_whatever.styles.$color_primary. Очевидно, что ни одно из этих решений не является работоспособным, поскольку конкретная ссылка на файл темы в партиалах означает, что нам понадобится копия каждого партиала для каждой схемы, а это не имеет никакого смысла.
У нас абсолютно нет достаточной пропускной способности для добавления пользовательских свойств в приложение; слишком сложно тратить недели на добавление функций для добавления --scheme-alpha и --scheme-beta ко всему на лету, а затем корректировать scss, чтобы выяснить, куда это должно быть добавлено.
Есть ли способ создания наследования в дочерних scss-файлах, которого мне не хватает в документации? Я даже рассматривал возможность какого-то миксина, который бы его захватывал, но даже в этом случае ему пришлось бы напрямую ссылаться на файл схемы, что снова противоречит цели.
Мое решение основано на веб-пакете? Есть ли какой-нибудь инструмент, который я могу использовать, чтобы построить каждую схему без необходимости копирования пасты theme_whatever.css в общее имя файла?
На данный момент единственное решение, которое я могу придумать, - это добавить папку для каждой темы и иметь theme_colors.scss в каждой из этих папок, а затем ссылаться на theme_colors во всех частичных файлах, а затем во время build, напишите сценарий, который скопирует все частичные файлы в каждую папку темы перед запуском webpack. Таким образом, мы могли бы иметь дублированные частичные файлы без фактического сохранения дублированных файлов.
Но это кажется очень неприятным.

Подробнее здесь: https://stackoverflow.com/questions/797 ... nheritance
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»