Научите ЦСС променљиве за 5 минута - Водич за почетнике

ЦСС прилагођена својства (позната и као променљиве) велика су победа за фронт-енд програмере. Доноси снагу променљивих у ЦСС, што резултира мањим понављањем, бољом читљивошћу и већом флексибилношћу.

Осим тога, за разлику од променљивих из ЦСС претпроцесора, ЦСС променљиве су заправо део ДОМ-а, који има пуно предности. Дакле, они су у основи попут САСС и МАЊЕ променљивих на стероидима. У овом чланку ћу вам дати курс о томе како функционише ова нова технологија.

Такође сам креирао бесплатан и интерактивни курс из 8 дела о ЦСС променљивим, па га проверите ако желите да постанете стручњак за ову тему.

Желите да научите ЦСС променљиве? Ево мог бесплатног курса од 8 делова!

Зашто научити ЦСС променљиве?

Постоји много разлога за употребу променљивих у ЦСС-у. Једно од најупечатљивијих је то што смањује понављање у вашем стилском листу.

У горњем примеру је много боље направити променљиву за #ffeeadбоју, него је понављати као што радимо овде:

Ово не само да ће ваш код учинити лакшим за читање, већ вам пружа и већу флексибилност, у случају да желите да промените ову боју.

Сада је то заиста могуће са варијаблама САСС и ЛЕСС годинама. Међутим, постоји неколико великих предности код ЦСС променљивих.

  1. Они не захтевају никакво преписивање да би функционисали, јер су изворни за прегледач. Дакле, није вам потребно никакво подешавање да бисте започели, као што је потребно са САСС и ЛЕСС.
  2. Они живе у ДОМ-у, што им отвара тону погодности, кроз које ћу проћи у овом чланку и у свом предстојећем курсу.

Сада кренимо са учењем ЦСС променљивих!

Проглашавање ваше прве ЦСС променљиве

Да бисте прогласили променљиву, прво морате да одлучите у ком опсегу би променљива требало да живи. Ако желите да она буде доступна глобално, једноставно је дефинишите у :rootпсеудо-класи. Поклапа се са основним елементом у вашем стаблу докумената (обично ознаком).

Како се променљиве наслеђују, то ће вашу променљиву учинити доступном током целе ваше апликације, јер су сви ваши ДОМ елементи потомци ознаке.

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

Као што видите, променљиву декларишете на исти начин на који бисте поставили било које ЦСС својство. Међутим, променљива мора започети са две цртице.

Да бисте приступили променљивој, потребно је да користите 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променљиву користите негде другде у својој апликацији, на пример у навбар-у, она једноставно не би функционисала. Претраживач би само игнорисао ту линију ЦСС-а.

Лакша реакција са променљивим

Велика предност ЦСС променљивих је што имају приступ ДОМ-у. То није случај са ЛЕСС или САСС јер се њихове променљиве компајлирају у редовни ЦСС.

У пракси то значи да можете, на пример, променити променљиве на основу ширине екрана:

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

А са тих једноставних четири реда кода ажурирали сте главну величину фонта у целој апликацији када се гледа на малим екранима. Прилично елегантно, ха?

Како приступити променљивим помоћу ЈаваСцрипт-а

Још једна предност живота у ДОМ-у је та што променљивима можете да приступите помоћу ЈаваСцрипт-а, па чак и да их ажурирате, на пример, на основу корисничких интеракција. Ово је савршено ако желите да својим корисницима пружите могућност да промене вашу веб локацију (као што је подешавање величине слова).

Наставимо на примеру с почетка овог чланка. Уграбивање ЦСС променљиве у ЈаваСцрипт-у узима три реда кода.

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

Да бисте ажурирали ЦСС променљиву, једноставно позовите setPropertyметоду на елементу у коме су променљиве декларисане и унесите име променљиве као први параметар, а нову вредност као други.

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

Ова главна боја може да промени целокупан изглед ваше апликације, тако да је савршена за омогућавање корисницима да поставе тему ваше веб локације.

Ажурирањем једне променљиве можете променити боју навигационе траке, текста и ставки.

Ажурирањем једне променљиве можете променити боју навигационе траке, текста и ставки.

Подршка прегледача

Тренутно 77 процената глобалног промета на веб локацијама подржава ЦСС променљиве, а готово 90 процената у САД-у. Већ неко време користимо ЦСС променљиве на Сцримба.цом, јер је наша публика прилично паметна и углавном користи савремене прегледаче.

Ок, то је било то. Надам се да сте нешто научили!

Ако желите да га правилно научите, посетите мој бесплатни курс ЦСС променљивих на Сцримби.

Хвала за читање! Зовем се Пер Борген, суоснивач сам Сцримбе - најлакшег начина да научим да кодирам. Ако желите да научите да правите модерну веб страницу на професионалном нивоу, требало би да проверите наш боотцамп за прилагодљиви веб дизајн.