Для чего нужна цветовая палитра?
Цветовая палитра через переменные CSS используется для удобного управления цветами в веб-разработке.
Обычно цвета используются многократно в разных частях сайта и изменение цветовой схемы может потребовать значительного количества изменений кода.
Использование переменных CSS позволяет определить цвета в одном месте (например, в файле colors-palette.scss), а затем использовать эти переменные в разных частях кода, где требуется использовать определенный цвет.
Если необходимо изменить цветовую схему, достаточно изменить значение переменной в разделе colors palette и это изменение будет автоматически применено ко всему сайту.
Подключение
В файле style.scss раскомментировать строку @import “base/colors-palette”;
Использование
В файле src/scss/base/colors-palette.scss заполните переменные соответствующими цветами проекта. Добавьте новые переменные при необходимости. Удалите неиспользуемые переменные.
Используйте переменные в своем коде
Дополнительное удобство
Установите плагины colorize и CSS Variable Autocomplete для удобной работы с цветовой палитрой.
- Colorize – подсветка цветов в переменных
- CSS Variable Autocomplete – автоматически заполняет переменные объявленные в файле colors-palette.scss