Как объединить функции цветов SASS и CSS-переменные

Как объединить функции цветов SASS и CSS-переменные

От автора: новый метод, поддерживаемый во всех браузерах, для сохранения в CSS-переменных цветов и изменения их с помощью функций SASS. Переменные CSS великолепны. Мы все это знаем. Значения цветов HSL лучшие. Согласна! Функции цветов SASS потрясающи. Да, естественно. Но как совместить все эти вещи и использовать их СЕГОДНЯ? Способ есть!

Мы разработали новый метод для нашего фреймворка, который сочетает в себе гибкость нативных переменных (хранящих значения цвета HSL) с практичностью функций SASS. Впервые слышите о CodyHouse Framework?

С чего начать

Браузерные компоненты

Глобальные редакторы

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Проблема

В нашем фреймворке мы используем CSS-переменные. Мы интегрировали модифицированную версию плагина postcss-css-variable, чтобы создать запасной вариант для браузеров, которые их не поддерживают. Мы предпочли CSS-переменные, а не переменные SASS, потому что вы можете перезаписать их значение в определенных контрольных точках (или использовать классы). Эта функция оказалась особенно полезной для разработки наших адаптивных систем отступов и типографики , а также цветовых тем.

Тем не менее, вот как мы определяли переменные цветов, когда запустили фреймворк (v 1.0.0):

Значения цвета HSL великолепны, потому что они делают интуитивно понятным создание цветовых вариаций. Просто измените значения оттенка, насыщенности и яркости. Числа легко читаются. Однако, когда мы начали работать с компонентами, мы поняли, что не существует простого способа установить альфа-значение для цвета:

Вы можете включить переменные CSS в миксины и функции SASS, но приведенный выше код вернет недопустимое значение. (—var (color) заменяется на hsl (x, x%, x%)). Как это исправить?

Тест № 1 — Использование цветовых модов CSS с плагином PostCSS

Сначала мы попробовали использовать нативные функции цветов CSS.

Они аккуратны, но часто не поддерживаются в основных браузерах. Мы попытались интегрировать несколько плагинов PostCSS, чтобы создать запасной вариант, но безуспешно. Мы продолжали получать ошибки, поэтому решили, что этот метод слишком ненадежен.

Тест № 2 — Установка переменных CSS для альфа-значений

Поскольку наша проблема заключалась в невозможности установить значения непрозрачности для цветов, подход номер два создавал переменные CSS для альфа-значений:

На уровне компонента вам нужно установить альфа-значение, применяя переменную альфа:

Имейте в виду, что цель состояла в том, чтобы сохранить все значения цвета в одном файле _colors.scss, чтобы всю систему было легко обслуживать. Мы не могли просто использовать hsla на уровне компонентов. Хотя мы не были полностью уверены в правильности этого варианта, мы решили использовать его в первой версии фреймворка.

Новое решение — создание миксина SASS для устранения проблем с беспорядочностью цветов

Создание переменных для альфа-значений оказалось плохим решением по двум основным причинам:

Если вы работаете на уровне компонентов, вам нужно переключаться на _colors.scss файл в любое время, когда вы хотите использовать другое альфа-значение для цвета.

Поскольку наша система основана на цветовых темах (цвета взаимозаменяемы), если вы создаете альфа-переменную для цвета, то должны сделать то же самое для всех остальных цветов.

Мы вернулись на круги своя. Вот процесс, который закончился тем, что мы считаем отличным решением: во-первых, мы попытались использовать миксин для определения альфа-значения. Для этого требуются 3 переменных миксинов: $property, $color-variable и $opacity. Мы будем использовать миксин так:

Вот код миксина:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Чтобы это работало, нам нужно было установить 3 переменные для каждого цвета:

Где —color-name-hз — это начение оттенка, —color-name-s — это процент насыщенности и —color-name-l — это процент яркости (Нет, мы не хотим отказываться от значений цвета HSL). Все еще слишком сложно, но что-то уже вырисовывается.

В этот момент у нас возникла идея создать вместо миксина собственную альфа-функцию SASS. Это позволило бы нам написать более простое объявление CSS:

Вот код функции:

Уже лучше! Последнее, что нас беспокоило — это необходимость вручную создавать 3 дополнительные переменные для каждого цвета (оттенок, насыщенность, яркость). Это раздражает, потому что вам нужно обновлять значения этих переменных каждый раз, когда вы изменяете цвет.

В какой-то момент мы поняли, что можем использовать миксин SASS для определения каждого цвета, чтобы мы могли автоматически генерировать значения оттенков, насыщенности и яркости в CSS:

Красота этого подхода заключается в том, что вы все равно объявляете цвета через синтаксис, который легко понять и который позволяет создавать цветовые вариации, изменяющие значения HSL:

Как установить альфа-значения на уровне компонента

В SCSS вы можете установить значение непрозрачности, используя альфа-функцию:

Это работает! Мы только что добавили обновление фреймворка (v 1.1.0), которое включает новые миксины и обновленный файл _colors.scss.

Использование этого метода для создания дополнительных функций цветов

Поскольку этот метод позволяет получить доступ и изменить значения оттенка, насыщенности, яркости и альфа-значения, вы можете создать функцию для каждого из них! Изменение яркости:

Изменение насыщенности:

Заключение

Основная цель нашего фреймворка — упрощение процесса запуска веб-проекта. Мы чувствуем, что движемся к этой цели.

Автор: Claudia Romano

Источник: https://codyhouse.co

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами с нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree