Мне нужно поделиться несколькими переменными sass / s css для нескольких веб-компонентов. Для этого мы создали очень полезную "_variables.s css" для пакета npm. Дело в том, что мы используем два основных цвета:
- что я бы назвал «реальными цветами»: (
$blue-unicorn, $pink-butterfly) - и цветами темы: (
$brand-color, $secondary-color)
и мы хотим поделиться только переменными цвета темы
цвета темы сделаны следующим образом: $brand-color : $blue-unicorn;
если DA внезапно решит использовать цвета $grey-grave и $black-shadow, нам просто нужно обновить пакет npm и не нужно будет менять имена переменных, все остальные коды в различных веб-компонентах. Если вы хотите больше узнать об этом использовании, вы можете взглянуть на эту статью о цветах палитры и цветах темы http://blog.magmalabs.io/2018/04/17/nice-way-handle-sass-color-variables.html.
оригинальный файл с нашими переменными .s css это:
@import 'variables/_colors';
$brand-color: $blue-unicorn;
$secondary-color: $pink-butterfly;
, и мы используем пакет scss-bundle npm, чтобы получить его для клиентов нашего пакета
$blue-unicorn: #0081EB;
$pink-butterfly: #F62880;
$brand-color: $blue-unicorn;
$secondary-color: $pink-butterfly;
, мы не хотим пользователи могут получить доступ к реальным цветам
каков будет правильный способ получить это?
$brand-color: #0081EB;
$secondary-color: #F62880;