Переменные Sass, CSS, а также переменные семантической темы

Переменные Sass, CSS, а также переменные семантической темы

От автора: на прошлой неделе мне представилась возможность поработать над побочным проектом, который не планируется включать в матрицу поддержки Internet Explorer 11, и это вызвало у меня только положительные эмоции! Это открывает дверь к большому количеству забавного CSS, под названием «Специальные возможности».

Добавление соответствующей «Темной темы» в приложение некоторое время ожидало своей очереди, и, увидев в моем графике немного свободного времени, я сел, чтобы придумать это. В этом нет ничего сверх оригинального, но я остановился на решении, в котором я смогу наложить несколько слоев на возможность тематического оформления своего приложения, и при этом сохранить некоторую мощь Sass.

Существующий проект использовал Sass для неполных повторений, вложений, переменных, карт и циклов for для создания некоторых служебных классов. Цветовые переменные настраиваются следующим образом:

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

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

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

Преобразовать это в пользовательские свойства CSS было довольно просто:

Использование переменных Sass здесь почти излишне, но я рад, что не удалил их. Покопавшись в коде, я нашел десятки мест, где мы использовали цветовые функции Sass, такие как lighten() и darken(). Программная генерация цветов (серого) по-прежнему имеет большое значение для этого проекта. К сожалению, в CSS нет цветовых функций (пока). Вместо того, чтобы позволить этому стать для меня препятствием, я решил, что могу взять лучшее из обоих миров.

После создания переменных для моей светлой темы по умолчанию, я начал создавать темный режим. В итоге мы использовали для этого переключатель JavaScript в пользовательском интерфейсе, но на первом этапе я начал с медиа-запроса prefers-color-scheme и использовал панель рендеринга Dev Tools, чтобы переключить его.

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

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

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

Стоп. Это не очень хорошо. Нарушение значения слов — признак плохой стратегии тематики, и я потеряю понимание реальности. Зная, что это плохой путь, имеет смысл ввести уровень абстракции над моими переменными CSS с семантическими именами, которые работают как в светлых, так и в темных темах.

Конечный результат выглядит примерно так, когда все переменные Sass, CSS и темы объединены:

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

Остальная часть работы заключалась в прочесывании приложения и выполнении поиска и замены по всему документу. $black заменил на var(—heavy-text), $white стал var(—bg) и так далее. Через пару часов мое светлое приложение теперь поддерживает темный режим. С точки зрения обратной совместимости, все переменные Sass по-прежнему работают. Если есть существующая работа в ветке или какая-то жестко заданная переменная Sass, которую я пропустил при миграции, в светлой теме по умолчанию ничего не сломается. Этот многоуровневый подход с переменными имеет некоторую встроенную устойчивость, когда мы по-прежнему сохраняем мощность существующих инструментов, но немного уменьшаем зависимость от них, не разрушая при этом все приложение.

Заключение

Некоторые краткие выводы из этого небольшого упражнения по добавлению тем в существующее приложение за пару часов:

Я рад, что мы начали с буквальных имен переменных в Sass. Я знаю, что использование семантических имен переменных, например, $brand-primary сейчас в тренде, и я отстаивал их раньше, но помогло то, что у нас не было этой абстракции до тех пор, пока она нам не понадобилась на уровне тем.

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

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

Удачный подход в использовании переменных CSS для всего этого заключается в том, что вы можете переопределять вещи на уровне компонентов. Если —bg-alt в обеих темах неправильный цвет, или вам нужен какой-то особый неуказанный цвет на сингапурский Новый год, или —bg-alt находится поверх —bg-alt… вы можете изменить его. Определенные переменные поддерживаются слабо. Каскад имеет приоритет.

Самый важный вывод для меня заключается в том, что я еще не закончил с Sass. Мне нравится Sass. Я использую его с большой выгодой хотя бы потому, что приходится использовать на один инструмент сборки меньше. И если CSS получит функции цвета, я думаю, мы будем намного ближе к идеальным стилям без использования Sass.

Автор: Dave Rupert

Источник: daverupert.com

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

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

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

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

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

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

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

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

Комментирование закрыто.