Већина веб-сајтова користи ЦСС за полирање свог изгледа и стилизовања различитих компоненти веб страница. ЦСС, или каскадни стилски лист, технички није програмски језик. Међутим, ЦСС се може користити са програмским језицима као што је ЈаваСцрипт за креирање прилагодљивих и интерактивних веб страница.
Ако сте користили програмске језике, као што је ЈаваСцрипт, знате да можете декларисати променљиву, доделити јој вредност и поново је користити у различитим деловима кода. Добра вест је да исти концепт можете применити у ЦСС-у.
Овај чланак ће дефинисати ЦСС променљиве, описати њихове предности и показати вам како да декларишете и користите променљиву у ЦСС-у.
Преглед садржаја
Шта су променљиве у ЦСС-у?
ЦСС променљиве су прилагођена својства која омогућавају веб програмерима да чувају вредности које могу поново да користе кроз листу стилова. На пример, можете декларисати стил фонта, боју позадине и величину фонта које можете поново да користите са елементима као што су наслови, параграфи и дивови у вашој бази кода.
Зашто користити ЦСС променљиве? Ово су неки од разлога;
- Олакшава ажурирање кода: Једном када декларишете променљиву, можете поново да користите цео списак стилова без ручног ажурирања сваког елемента.
- Смањује понављање: Како ваша база кода расте, видећете да имате сличне класе и елементе. Уместо да пишете ЦСС код за сваку ставку, можете једноставно користити ЦСС променљиве.
- Чини ваш код лакшим за одржавање: Одржавање кода је важно ако желите да ваше пословање буде трајно предузеће.
- Побољшава читљивост: Савремени свет подстиче сарадњу. Коришћење променљивих у ЦСС-у резултира компактном кодном базом која је читљива.
- Лако одржавати доследност: ЦСС променљиве вам могу помоћи да одржите доследан стил како ваш изворни код расте или се повећава величина апликације. На пример, можете да наведете маргине, паддинг, стил фонта и боје које ће се користити у вашим дугмадима широм веб локације.
Како декларисати променљиве у ЦСС-у
Пошто знате шта су варијабле у ЦСС-у и зашто би требало да их користите, можемо наставити и илустровати како их декларисати.
Да бисте декларисали ЦСС променљиву, почните са именом елемента, а затим напишите две цртице (–), жељено име и вредност. Основна синтакса је;
element {
--variable-name: value;
}
На пример, ако желите да примените паддинг у целом документу, можете га прогласити као;
body {
--padding: 1rem;
}
Опсег променљивих у ЦСС-у
ЦСС променљиве могу бити локално (доступне у оквиру одређеног елемента) или глобално (доступне у целом листу стилова).
Локалне варијабле
Локалне варијабле се додају одређеним селекторима. На пример, можете их додати дугмету. Ово је пример;
.button {
--button-bg-color: #33ff4e;
}
Променљива боје позадине доступна је на селектору дугмади и његовим потомцима.
Глобалне варијабле
Једном декларисане, можете користити глобалне променљиве са било којим елементом у вашем коду. Користимо :роот псеудо-класу за декларисање глобалних променљивих. Овако их проглашавамо;
:root {
--primary-color: grey;
--secondary-color: orange;
--font-weight: 700:
}
У горњем коду можете користити било коју од променљивих декларисаних са различитим елементима, као што су наслови, параграфи, дивови или чак цело тело.
Како користити променљиве у ЦСС-у
Направићемо пројекат у сврху демонстрације и додати датотеке индек.хтмл и стилес.цсс.
У датотеци индек.хтмл можемо имати једноставан див са два наслова (х1 и х2) и параграфом (п).
<div> <h1>Hello Front-end Dev!!!!</h1> <h2>This is how to use variables in CSS.</h2> <p> Keep scrolling</p> </div>
У датотеци стиле.цсс можемо имати следеће;
:root {
--primary-color: grey;
--secondary-color: orange;
--font-weight: 700:
--font-size: 16px;
--font-style: italic;
}
body {
background-color: var(--primary-color);
font-size: var(--font-size);
}
h1 {
color: var(--secondary-color);
font-style: var(--font-style)
}
h2 {
font-weight: var(--font-weight)
}
p {
font-size: calc(var(--font-size) * 1.2);
}
Када се веб страница прикаже, имаћемо следеће;
Из кода изнад, декларисали смо глобалне променљиве у елементу :роот. Морамо да користимо кључну реч вар да бисмо користили глобалну променљиву у било ком од наших елемената. На пример, да бисмо применили боју позадине коју смо декларисали као глобалну променљиву, представљамо наш код на следећи начин;
боја позадине: вар(–примарна-боја);
Проверите све остале елементе и приметићете тренд у примени кључне речи вар.
Користите ЦСС променљиве са ЈаваСцрипт-ом
Користићемо локалне и глобалне променљиве да бисмо илустровали како да користите ЦСС променљиве са ЈаваСцрипт-ом.
Можемо додати елемент упозорења нашем постојећем коду;
<див цласс=”алерт”>Кликни ме!
Наш нови индек.хтмл документ ће бити следећи;
<div> <h1>Hello Front-end Dev!!!!</h1> <h2>This is how to use variables in CSS.</h2> <p> Keep scrolling</p> </div> <div class="alert">Click me!</div>
Можемо да стилизујемо нашу променљиву. Додајте следећи код свом постојећем ЦСС коду;
.alert {
--bg-color: red; /* Define local variable */
background-color: var(--bg-color); /* Use the local variable for the background color */
padding: 10px 20px;
border-radius: 4px;
font-weight: var(--font-weight); /*Use the global variable for font weight*/
width: 50px;
}
Урадили смо следеће;
- Дефинисана локална променљива унутар елемента упозорења;
–бг-боја: црвена
- Користи кључну реч вар за приступ овој локалној променљивој;
бацкгроунд-цолор: вар(–бг-цолор);
- Користили смо глобалну променљиву коју смо раније декларисали као нашу тежину фонта;
фонт-веигхт: вар(–фонт-веигхт);
Додајте ЈаваСцрипт код
Можемо учинити да наш елемент упозорења реагује; када кликнете на њега, добићете искачући прозор у вашем претраживачу који каже; „Користили смо ЦСС променљиве са ЈаваСцрипт-ом!!!!“.
Можемо додати ЈаваСцрипт код директно у ХТМЛ код тако што ћемо га затворити помоћу ознака <сцрипт/>. ЈаваСцрипт код треба да дође после ХТМЛ кода, али пре затварања ознаке .
Додајте овај код;
<script>
const alertDiv = document.querySelector('.alert');
alertDiv.addEventListener('click', function() {
window.alert("We have used CSS Variables with JavaScript!!!!");
});
</script>
Ваш ХТМЛ код би сада требао изгледати отприлике овако;
Наш ЈаваСцрипт ради следеће;
- Користимо доцумент.куериСелецтор() да лоцирамо елемент упозорења.
- Елементу упозорења додељујемо променљиву алертДив.
- У алертДив-у користимо метод аддЕвентЛистенер() да бисмо додали догађај „клик“.
- Користимо виндов.алерт() да прикажемо поруку када се догоди клик.
Када се страница прикаже, имаћете следеће;
Када кликнете на упозорење, добићете следеће;
Резервне вредности у ЦСС променљивим
Шта се дешава када референцирате променљиву која није дефинисана у вашој табели стилова? ЦСС ефекат који намеравате да примените неће бити примењен. Резервне вредности нуде вредност ефекта који ће се појавити уместо нереференциране променљиве.
Резервне вредности су корисне на следеће начине;
- Ако одређени прегледачи не разумеју ЦСС променљиве, својство селецт може имати на шта да се врати.
- Ако сумњате да страница не ради како се очекивало због ЦСС променљиве, можете користити резервну вредност да бисте проверили да ли је тачна.
Можете имати више од једног резервног својства, одвојеног зарезима. Узмите овај код, на пример;
:root {
--primary-color: #007bff;
}
.btn {
background-color: var(--primary-color, red, yellow);
padding: 10px;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
Ако погрешно напишете реч примарна боја када користите глобалну променљиву, што значи да није декларисана, она ће изабрати црвену, резервну вредност.
Можемо то боље демонстрирати са овим кодом;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:root {
--primary-color: #007bff;
}
.btn {
background-color: var(--primary-color, red);
padding: 10px;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<button class="btn">Click me!</button>
</body>
</html>
Ако га прикажете у претраживачу, добићете ово;
Међутим, можемо добити исти код и променити само један знак на селектору дугмади на следећи начин;
.btn {
background-color: var(--primary-colr, red); /*I have misspelled primary-color to be primary-colr */
padding: 10px;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
Прегледач ће сада ово приказати;
Користите динамичку вредност и променљиве израчунате вредности у ЦСС-у
Динамичке вредности се аутоматски ажурирају на основу одређених догађаја или услова, као што су уноси корисника.
Проучите овај код;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Variables with JavaScript</title>
<style>
:root {
--color: #333;
}
#color-input {
margin-left: 1em;
}
#color-input {
--color: var(--color-input);
}
</style>
</head>
<body>
<label for="color-input">Choose a color:</label>
<input type="color" id="color-input">
</body>
</html>
Горњи код ради следеће;
- Променљиву –цолор декларишемо са подразумеваном вредношћу #333 користећи селектор :роот.
- Користимо #цолор-инпут за одабир улазног елемента.
- Вредност –цолор је подешена на вар(–цолор-инпут), што значи да се боја увек ажурира када корисник одабере нову боју користећи бирач боја.
Израчунате вредности врше прорачуне на основу других својстава или променљивих. Можемо то илустровати користећи овај код;
:root {
--base-font-size: 14px;
--header-font-size: calc(var(--base-font-size) * 3);
}
h2 {
font-size: var(--header-font-size);
}
Из овог блока кода можемо приметити следеће;
- Имамо променљиву –басе-фонт-сизе која дефинише основну величину фонта.
- Имамо –хеадер-фонт-сизе, што је 3 пута веће од вредности –басе-фонт-сизе.
- Имамо х1 селектор који користи вар са –хеадер-фонт-сизе.
- Дакле, сав х1 на веб страници ће бити три пута већи од –басе-фонт-сизе.
Окончање
Сада разумете како да користите ЦСС променљиве да бисте убрзали процес развоја и писали код који је лако одржавати. Можете да користите прилагођене променљиве са ХТМЛ-ом и библиотекама као што је Реацт. Погледајте различите приступе које можете користити за стилизовање Реацт-а помоћу ЦСС-а.
Овде можете проверити изворни код.