CSS Variables – новая увлекательная технология для современных браузеров. Это привносит мощность переменных в CSS, что приводит к меньшему повторению, лучшей читабельности и большей гибкости.

Чтобы помочь вам начать, я создал бесплатный курс по переменным CSS на Scrimba.

Это продолжение нашей серии бесплатных курсов CSS. Ранее мы запускали курсы по CSS Grid и Flexbox. Итого они получили более 20 тысяч регистраций.

Структура курса

Курс содержит 8 интерактивных скринкастов. Все они длятся от 3 до 6 минут, поскольку моя цель — научить вас переменным CSS как можно скорее. В конце некоторых из них я дам вам задание и пожелаю поиграть с кодом в интерактивном режиме. Это можно сделать непосредственно в браузере, поскольку скринкасты Scrimba позволяют это сделать.

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

А теперь давайте рассмотрим каждый урок.

Урок №1: зачем изучать сменные CSS

В первом ящике я расскажу о том, почему стоит изучать переменные CSS. Я обсудю общие преимущества, а также его преимущества перед переменными SASS и LESS.

Урок №2: Ваша первая сменная CSS

Тогда мы перейдем прямо к коду. Сначала я покажу вам, как создать переменную CSS, а затем попрошу вас сделать то же самое. Важно, чтобы вы действительно кодировали, а не просто смотрели скринкасты, поскольку это улучшает знание.

:root {
—красный: #ff6f69;
}

тело {
цвет: var(—red);
}

Урок №3: Переопределение переменных

Мы продолжим переопределение, крутую концепцию, которая возможна, поскольку переменные CSS имеют доступ к DOM и наследуются вниз по иерархии. Это четко отделяет их от сменных SASS и LESS, работающих похоже константы нож переменные когда они открывают браузер и не знают о DOM.

Урок №4: Локальные переменные

Локальные переменные – это переменные, доступные только в определенной области, например в разделе заголовка или боковой панели программы. Если вы попытаетесь получить доступ к нему из другой области, он не будет определен.

Урок №5: создание тем с помощью сменных CSS

Темы являются одним из самых больших преимуществ переменных CSS. Говоря о темах, я имею в виду не только полные темы веб-сайтов, но и темы отдельных компонентов, которые являются более нормальным случаем использования (например, визуальное изменение элемента на признакам чтобы он выделялся из толпы).

Здесь мы используем темы, чтобы выделить один из наших элементов в сети среди других.

Урок №6: Изменение переменных с помощью JavaScript

Вы также можете изменять переменные CSS с помощью JavaScript, что очень полезно. Это открывает возможность разрешить пользователям изменять ваши переменные. Снова то, что невозможно с переменными LESS и SASS. Очень актуальным примером является возможность пользователям регулировать общий размер шрифта на вашем сайте. Это сделает его более доступным для людей с плохим зрением.

Урок №7: Скорость реагирования с переменными CSS

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

Урок №8: Сменные CSS и наследование

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

И все это. Просматривая эти короткие скринкасты, у вас будет четкое понимание переменных CSS. Их просмотр займет менее 30 минут, и вы также можете настроить скорость воспроизведения, чтобы сделать его еще быстрее.

Другими словами: этот курс, вероятно, самый быстрый способ правильно изучить переменные CSS.

Вызовы могут, естественно, вынудить это занять чуток больше времени, но они добровольны. Вы выбираете, насколько интерактивны вы хотите, чтобы этот курс был.

Формат Scrimba

Курс создан с помощью Scrimba, инструмента интерактивного кодирования скринкаста, соучредителем которого я являюсь вместе с Магнусом и Синдром.

Как я уже упоминал ранее, уникальность Scrimba заключается в том, что скринкасты полностью интерактивны, то есть вы можете редактировать код внутри кастов.

Вот gif, объясняющий концепцию:

Приостановить скринкаст → Редактировать код → Запустить! → Просмотрите свои изменения

Это отлично, когда вы чувствуете, что вам нужно поэкспериментировать с кодом, чтобы правильно его понять, или когда вы просто хотите скопировать часть кода.

Кроме того, скринкасты Scrimba занимают 1% от размера видео, что означает, что их гораздо легче просматривать, даже если ваше интернет-соединение медленное.

Итак, ознакомьтесь с курсом сегодня и счастливого программирования 🙂

Спасибо за чтение! Меня зовут Пер Борген, я соучредитель Scrimba – самый легкий способ научиться кодировать. Если вы хотите научиться создавать современные веб-сайты на профессиональном уровне, посетите наш курс адаптивного веб-дизайна.