svetozar
@svetozar
dudin.tv

Как организовать общий набор CSS цветов в Rails + Vue.js?

Создаю приложение на Ruby on Rails где публичная часть страниц реализована через стандартный рендер (slim), а админская часть с помощью Vue. Требуется иметь общий набор стандартных фирменных цветов, общих для публичной части и для внутренней.

Сейчас я использую Tailwindcss с кастомными цветами, и это точно не идеальное решение.

У меня прописаны цвета в tailwind.js:
colors: {
  white: 'hsl(200, 2%, 90%)',
  'white-50': 'hsla(200, 2%, 90%, 0.5)',
  'white-20': 'hsla(200, 2%, 90%, 0.2)',
  ...
}


А так же продублированы в colors.scss с использованием библиотеки "postcss-color-adjustment":
$white: hsl(200, 2%, 90%);
$white-50: color($white alpha(.5));
$white-20: color($white alpha(.2));
$white-05: color($white alpha(.05));


В основном использую цвета из Tailwind в общих scss-файлах и во Vue.
В scss так:
label {
  @apply uppercase text-white;
}

И так же во Vue:
<style style="scss" scoped>
  .panel {
    @apply border border-white;
  }
</style>


Но иногда цвета требуются как запчасть для градиентов. И тогда использую переменные из colors.scss:
$red-grad-x-hover: linear-gradient(to right, color($orange brighten(10%)), color($red brighten(10%)));


В идеале хотелось бы иметь библиотеку зависимых цветов, которые можно было легко менять скопом. Поменял "white" и поменялись все "white-50", "white-20" и т.д. Чтобы второй цвет зависел от первого через функцию цвета (как в "postcss-color-adjustment"). Лучше всего коллекцию SCSS-переменных. Чтобы можно было гибко их переиспользовать в градиентах, даже во Vue.
В целом это возможно, но тогда надо не забывать импортировать такой scss-файл в каждый *.vue файл... Что кажется не очень, но может я просто привиредничаю?))

Подскажите, куда смотреть, что может стоит попробовать? Хотелось бы продолжить работать с Tailwind, но получается как-то некрасиво с цветами.

Заранее благодарю за любой коментарий!
  • Вопрос задан
  • 51 просмотр
Пригласить эксперта
Ответы на вопрос 1
Kozack
@Kozack Куратор тега Vue.js
Если вам не нужно поддерживать IE11, Тогда вы можете использовать CSS переменные. Примерно так:
:root {
  --white-color: 200, 2%, 90%;
  --white-alpha: 100%;
  --white: hsla(var(--white-color), var(--white-alpha));
}

.component {
  background: var(--white);  
}


Если поменять одну из глобальных переменных он изменится во всех компонентах.
Или её можно переопределять на лету для разных компонентов или по событию:

Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы