Автор оригинала: FreeCodeCamp Community Member.
Переменные CSS – это захватывающая новая технология для современных браузеров. Он приносит мощность переменных к CSS, что приводит к меньшему повторению, лучшую читаемость и более гибкость.
Чтобы помочь вам начать, я Создал бесплатный курс по переменным CSS в Scrimba.
Это продолжение нашей серии бесплатных курсов CSS. Ранее мы запустили курсы на CSS Grid и Flexbox Отказ Объединенные, они настаивали более 20 тысяч зачислений.
Структура курса
Курс содержит 8 интерактивных скринкастов. Они все в возрасте от 3 до 6 минут, так как моя цель – научить вас переменные CSS как можно быстрее. В конце некоторых из них я дам вам вызов и поощряю вас интегрально с кодом в интерактивном режиме. Это можно сделать прямо в браузере, так как Scrimba Screencasts делает это возможным.
На протяжении всего курса мы будем работать с очень простым веб-сайтом портфолио, поскольку он дает нам возможность выделить наиболее важные случаи использования для переменных CSS.
Теперь давайте посмотрим на каждый из уроков.
Урок № 1: почему выучить переменные CSS
На самом первом скринкасте я расскажу о том, почему вы должны изучать переменные CSS. Я обсудим общие преимущества, а также свои преимущества по сравнению с SASS и менее переменными.
Урок № 2: Ваша первая переменная CSS
Затем мы прыгаем прямо в код. Я сначала покажу вам, как вы создаете переменную CSS, а затем попросите вас сделать то же самое. Важно, чтобы вы на самом деле кодируете, а не просто посмотреть скринкасты, так как это делает знания ручки лучше.
: root {- # ff6f69; }
Тело {цвет: var (- красный); }
Урок № 3: Переменные переменные
Мы продолжим переоценку, прохладную концепцию, возможно, поскольку переменные CSS имеют доступ к доме и унаследованы по иерархии. Это четко отделяет их от Sass и меньше переменных, которые больше работают как Константы чем Переменные Когда они попадают в браузер и не имеют знания о доме.
Урок № 4: Локальные переменные
Локальные переменные являются переменными, которые доступны только в определенном объеме, например, внутри заголовка или боковой панели вашего приложения. Если вы попытаетесь получить доступ к этому из другого объема, он не будет определен.
Урок № 5: Тематическое тему с переменными CSS
Темы – одна из самых больших преимуществ о переменных CSS. По темам я не только говорю о полных темах веб-сайта, но и компонентных темах, которые являются более нормальным использованием (например, визуально изменяют элемент на представил , чтобы он выделялся из толпы).
Здесь мы используем темы, чтобы сделать один из наших предметов в сетке выделяться от других.
Урок № 6: Изменение переменных с JavaScript
Вы также можете изменить переменные CSS с JavaScript, который очень полезен. Это открывает возможность позволить своим пользователям изменить ваши переменные. Опять же, что не возможно с меньшими переменными и SASS. Очень имеющийся пример этого позволяет пользователям настроить общий размер шрифта на вашем сайте. Это сделает его более доступным для людей с плохим видением.
Урок № 7: Отзывчивость с переменными CSS
Учитывая, что переменные CSS имеют доступ к DOM, они также могут быть изменены на основе размера экрана. Это на самом деле просто пример на переоценке, но я думаю, что это заслуживает целого нового скрингаста, так как отзывчивость – это довольно ядро в наши дни. Все, что делает отзывчивость проще, должна использоваться передними разработчиками.
Урок № 8: Переменные CSS и наследование
Несмотря на то, что я говорю о наследстве на протяжении всего курса, мы закончим курс с несколькими дополнительными заметками на нем, так как есть пара использования, которые вы можете себе представить, но которые вы не представили.
Вот и все. Проходя через эти быстрые скринкасты, у вас будет твердое понимание переменных CSS. Наблюдение за ними займет у вас менее 30 минут, и вы также можете настроить скорость воспроизведения, чтобы сделать ее еще быстрее.
Другими словами: этот курс, вероятно, самый быстрый способ правильно изучать переменные CSS.
Конечно, вызовы могут занять немного больше времени, но они добровольно. Вы выбираете, насколько интерактивным вы хотите, чтобы этот курс был.
Формат Scrimba
Курс построен с использованием Scrimba, интерактивного кодирования Screencast Tool, который я являюсь соучредителем, вместе с Магнус и Sindre Отказ
Как я уже упоминал ранее, уникальная вещь с Scrimba заключается в том, что скринкасты полностью интерактивны, что означает, что вы можете редактировать код внутри литых.
Вот GIF, который объясняет концепцию:
Приостановите Screencast → Отредактируйте код → Запустите его! → Увидеть ваши изменения
Это здорово, когда вы чувствуете, что вам нужно поэкспериментировать с кодом, чтобы правильно его понять, или когда вы просто хотите скопировать кусок кода.
Кроме того, Scrimba Screencasts весит 1% видео в размере файла, что означает, что намного проще посмотреть, даже когда ваше подключение к Интернету медленно.
Так что проверить Курс сегодня и счастливое кодирование:)
Спасибо за прочтение! Меня зовут на Борген, я соучредитель Scrimba – Самый простой способ научиться кодировать. Вы должны проверить наш Отзывчивый веб-дизайн Bootcamp Если хотите научиться строить современный веб-сайт на профессиональном уровне.