Научете CSS променливи за 5 минути - Урок за начинаещи

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

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

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

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

Защо да учим CSS променливи?

Има много причини да се използват променливи в CSS. Един от най-убедителните е, че намалява повторението във вашата таблица със стилове.

В горния пример е много по-добре да създадете променлива за #ffeeadцвета, отколкото да я повтаряте, както правим тук:

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

Сега това наистина е възможно с променливи SASS и LESS от години. Има обаче няколко големи предимства с CSS променливите.

  1. Те не изискват никакво пренаписване, за да работят, тъй като са родни в браузъра. Така че не се нуждаете от никаква настройка, за да започнете, както при SASS и LESS.
  2. Те живеят в DOM, което разкрива много предимства, които ще преживея в тази статия и в предстоящия ми курс.

Сега нека започнем да учим CSS променливи!

Деклариране на първата ви CSS променлива

За да декларирате променлива, първо трябва да решите в кой обхват трябва да живее променливата. Ако искате тя да бъде достъпна глобално, просто я дефинирайте в :rootпсевдокласа. Той съвпада с основния елемент в дървото на вашия документ (обикновено етикетът).

Тъй като променливите се наследяват, това ще направи вашата променлива достъпна в цялото ви приложение, тъй като всичките ви DOM елементи са потомци на маркера.

:root { --main-color: #ff6f69; } 

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

За достъп до променлива трябва да използвате var()функцията и да предадете името на променливата като параметър.

#title { color: var(--main-color); } 

И това ще придаде на заглавието ви #f6f69цвят:

Деклариране на локална променлива

Можете също така да създадете локални променливи, които са достъпни само за елемента, в който е деклариран, и за неговите деца. Това има смисъл, ако знаете, че дадена променлива ще се използва само в определена част (или части) от приложението ви.

Например може да имате поле за предупреждение, което използва специален вид цвят, който не се използва на други места в приложението. В този случай може да има смисъл да се избягва поставянето му в глобалния обхват:

.alert { --alert-color: #ff6f69; } 

Тази променлива вече може да се използва от нейните деца:

.alert p { color: var(--alert-color); border: 1px solid var(--alert-color); } 

Ако се опитате да използвате alert-colorпроменливата някъде другаде във вашето приложение, например в лентата за навигация, тя просто няма да работи. Браузърът просто ще игнорира този ред на CSS.

По-лесна реакция с променливи

Голямо предимство на CSS променливите е, че те имат достъп до DOM. Това не е така при LESS или SASS, тъй като техните променливи се компилират до редовен CSS.

На практика това означава, че можете например да промените променливите въз основа на ширината на екрана:

:root { --main-font-size: 16px; } media all and (max-width: 600px) { :root { --main-font-size: 12px; } } 

И с тези прости четири реда код сте актуализирали основния размер на шрифта в цялото си приложение, когато се гледа на малки екрани. Доста елегантно, а?

Как да получите достъп до променливи с JavaScript

Друго предимство на живота в DOM е, че можете да осъществите достъп до променливите с JavaScript и дори да ги актуализирате, например въз основа на взаимодействието на потребителите. Това е идеално, ако искате да дадете на потребителите си възможност да променят уебсайта си (като например регулиране на размера на шрифта).

Нека продължим с примера от началото на тази статия. Грабването на CSS променлива в JavaScript отнема три реда код.

var root = document.querySelector(':root'); var rootStyles = getComputedStyle(root); var mainColor = rootStyles.getPropertyValue('--main-color'); console.log(mainColor); \--> '#ffeead' 

За да актуализирате CSS променливата, просто извикайте setPropertyметода на елемента, в който променливите са декларирани, и предайте името на променливата като първи параметър и новата стойност като втори.

root.style.setProperty('--main-color', '#88d8b0') 

Този основен цвят може да промени целия външен вид на приложението ви, така че е идеален за позволяване на потребителите да задават темата на вашия сайт.

Чрез актуализиране на една променлива можете да промените цвета на лентата за навигация, текста и елементите.

Чрез актуализиране на една променлива можете да промените цвета на лентата за навигация, текста и елементите.

Поддръжка на браузър

В момента 77 процента от глобалния трафик на уебсайтове поддържа CSS променливи, като почти 90 процента са в САЩ. Вече използваме CSS променливи в Scrimba.com от известно време, тъй като нашата аудитория е доста добре позната в технологиите и използва най-вече съвременни браузъри.

Добре, това беше. Надявам се да сте научили нещо!

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

Благодаря за четенето! Казвам се Per Borgen, аз съм съосновател на Scrimba - най-лесният начин да се науча да кодирам. Трябва да проверите нашия отзивчив уебкамп за уеб дизайн, ако искате да се научите да изграждате модерен уебсайт на професионално ниво.