Комментарии 9
Не понял зачем вы используете CSS variables, если вы не хотите отказываться от SCSS. Только потому что CSS variables — новое и «модное»?
Я вот тоже не понял. Если в рантайме цвета не менять, а у них супорт ie11, зачем нужны CSS Custom Properties?
Различия зависят от реализации scss темизации.
Мы рассматривали подход из Angular Materials. В material каждому компоненту заводится миксин с темизирующей частью, затем все миксины объединяются в один с помощью объекта темы и инициализируются на корне приложения. Нам не понравились следующие вещи:
— необходимо жертвовать инкапсуляцией стилей
— нужно вносить изменения в каждый компонент, это создаёт много работы для реализации темизации а так же дополнительные работы при создании новых компонентов
— каждая тема доступная на странице раздувает файл стилей одинаковыми селекторами
Подход с хранением всех тем в ui-kit нас не устроил потому что много продуктов, соответственно сильно раздуется библиотека.
Может есть ещё какие-то подходы которые мы упустили?
Мы рассматривали подход из Angular Materials. В material каждому компоненту заводится миксин с темизирующей частью, затем все миксины объединяются в один с помощью объекта темы и инициализируются на корне приложения. Нам не понравились следующие вещи:
— необходимо жертвовать инкапсуляцией стилей
— нужно вносить изменения в каждый компонент, это создаёт много работы для реализации темизации а так же дополнительные работы при создании новых компонентов
— каждая тема доступная на странице раздувает файл стилей одинаковыми селекторами
Подход с хранением всех тем в ui-kit нас не устроил потому что много продуктов, соответственно сильно раздуется библиотека.
Может есть ещё какие-то подходы которые мы упустили?
codyhouse.co/blog/post/css-custom-properties-vs-sass-variables
В этой статье хорошо описывают разницу и мотивацию выбора css переменных
В этой статье хорошо описывают разницу и мотивацию выбора css переменных
Мне всегда казалось что для цветовых палит логичнее использовать цвета в hsla. А ещё лутчше в перцепционной цветовые модели (lab, luv и т.д.)
Спасибо, не сталкивался с перцепционными цветовыми моделями, но хотел бы изучить. Можете поделиться примерами реализации в подобных случаях?
Теория есть тут https://programmingdesignsystems.com/
На практике есть тулза в гайде Google Material которая строит палитру по lch (hcl) моделе https://material.io/design/color/the-color-system.html#tools-for-picking-colors
Ещё теории есть у автора chroma.js https://www.vis4.net/blog/2011/12/avoid-equidistant-hsv-colors/
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Как мы подружили SCSS с CSS Variables на примере c темизацией UI Kit