Искате ли да научите CSS променливи? Ето моят безплатен курс за 8 части!

Снимка на Микаел Кристенсън на Unsplash

CSS Variables е нова вълнуваща технология за съвременните браузъри. Той носи силата на променливите в CSS, което води до по-малко повторения, по-добра четимост и по-голяма гъвкавост.

За да ви помогна да започнете, създадох безплатен курс за CSS променливи в Scrimba.

Това е продължение на нашата серия от безплатни CSS курсове. Преди това стартирахме курсове по CSS Grid и Flexbox. В комбинация те постигнаха над 20 000 записа.

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

Курсът съдържа 8 интерактивни екрани. Всички те са между 3–6 минути, тъй като моята цел е да ви науча CSS променливи възможно най-бързо. В края на някои от тях ще ви изправя предизвикателство и ще ви насърча да играете с кода интерактивно. Това може да се направи директно в браузъра, тъй като екранните екрани на Scrimba правят това възможно.

По време на курса ще работим с много прост уебсайт за портфолио, тъй като той ни дава възможност да откроим най-важните случаи на използване за CSS променливи.

Сега нека разгледаме всеки от уроците.

Урок №1: Защо да научите CSS променливи

В първата екранизация ще говоря защо трябва да научите CSS променливи. Ще обсъдя общите ползи, както и неговите предимства пред променливите SASS и LESS.

Урок №2: Вашата първа CSS променлива

Тогава ще скочим директно в кода. Първо ще ви покажа как създавате CSS променлива и след това ще ви помоля да направите същото. Важно е всъщност да кодирате, а не само да гледате екранните предавания, тъй като това прави знанията по-добри.

: root {
  --red: # ff6f69;
}
тяло {
  цвят: var (- червен);
}

Урок № 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, интерактивен инструмент за кодиране на екрани, който съм съосновател, заедно с Magnus и Sindre.

Както вече споменах, уникалното при Scrimba е, че екранните излъчвания са напълно интерактивни, което означава, че можете да редактирате кода във вътрешностите.

Ето гиф, който обяснява концепцията:

Поставете пауза на екрана → Редактиране на кода → Стартирайте го! → Вижте промените

Това е чудесно, когато смятате, че трябва да експериментирате с кода, за да го разберете правилно или когато просто искате да копирате част от кода.

Също така екраните на Scrimba тежат 1% от видеоклиповете в размер на файла, което означава, че е много по-лесно да гледате, дори когато вашата интернет връзка е бавна.

Затова вижте курса днес и щастливо кодиране :)

Благодаря за четенето! Казвам се Пер, съосновател съм на Scrimba и обичам да помагам на хората да научат нови умения. Следвайте ме в Twitter, ако искате да получавате известия за нови статии и ресурси.