ЦСС променљиве, познате и као прилагођена својства, помажу вам да смањите понављање у вашим стиловима. Ово вам, заузврат, помаже да уштедите време и труд када правите промене у свом дизајну. Такође можете бити сигурни да нећете пропустити ниједну вредност коју треба да ажурирате.
Приступ ДОМ-у вам омогућава да креирате променљиве, складиштите их и поново их користите у свом стилу.
Како дефинисати и користити ЦСС променљиве
Да бисте своје стилове учинили уређенијим, одржаваним и вишекратним, можете да користите ЦСС променљиве у било којој особини која прихвата вредност.
Узмите следећи пример ХТМЛ датотеке и ЦСС датотеке која не користи ЦСС променљиве.
ХТМЛ:
хтмл>
<хтмлланг="ен">
<глава>
<наслов>ЦСС променљиве – варијације дугметанаслов>
<линкрел="стилесхеет"хреф="Вариаблес.цсс" />
глава>
<тело>
<див>
<х1>ЦСС променљивех1>
<див>
ЦСС:
.бтн {
паддинг: 1рем 1.5рем;
позадина: транспарентна;
фонт-веигхт: 700;
боја црвена;
}
Овако би ваша страница требало да изгледа:
Тхе .бтн класа која се користи у горњој таблици стилова није динамичка и узрокује да креирате посебну класу за прилагођавање појединачних дугмади. Прављење прелепих веб локација захтева да будете динамични са својим фронт-енд стилом. Примена дугмади на овај начин ће једноставно учинити тај задатак тешким за постизање.
Као и већина програмских језика, морате да иницијализујете и замените ЦСС променљиве.
Да бисте иницијализовали ЦСС променљиву, ставите префикс имена променљиве двоструким цртицама:
:корен{
/*ЦСС променљива*/
--променљива_наме: вредност;
}
Можете иницијализовати променљиву било где, али имајте на уму да ћете ту променљиву моћи да користите само унутар иницијализованог селектора. Због тога се ЦСС променљиве конвенционално иницијализују унутар коренског селектора. Ово циља на елемент највишег нивоа ДОМ-а и омогућава да променљиве буду доступне целом ХТМЛ документу на глобалном нивоу.
Да бисте заменили променљиву у свом ЦСС стилу, користићете вар() имовина:
:корен {
/*ЦСС променљива*/
--Примарна: #900ц3ф;
--секундарно: #фф5733;
}.бтн {
паддинг: 1рем 1.5рем;
позадина: транспарентна;
фонт-веигхт: 700;
боја: вар(--Примарна);
боја позадине: вар(--секундарни);
}
.под-примарни {
боја: вар(--секундарни);
боја позадине: вар(--Примарна);
}
Основни селектор садржи две променљиве: --Примарна и --секундарни. Обе варијабле се затим замењују у .бтн класа као боја и боја позадине.
Користећи променљиве, можете много лакше да стилизујете појединачне елементе. Поновним коришћењем променљивих можете брзо променити вредност једном да бисте је ажурирали у свакој инстанци.
Тхе вар() својство може узети и други аргумент. Овај аргумент делује као резервна вредност за први аргумент у ситуацији када први није дефинисан или је неважећи.
На пример:
:корен {
--Примарна: #900ц3ф;
--секундарно: #фф5733;
}
.бтн {
паддинг: 1рем 1.5рем;
позадина: транспарентна;
фонт-веигхт: 700;
боја: вар(--примарни, плави);
}
У овом примеру, замените --Примарна променљива у боја стил. Ако из било ког разлога ова вредност не успе, листа стилова ће користити другу вредност као резервну. Такође можете користити другу ЦСС променљиву као резервну вредност.
Манипулисање и замена ЦСС променљивих помоћу ЈаваСцрипт-а
Манипулисање ЦСС променљивим помоћу ЈаваСцрипт-а може бити моћан начин да промените изглед и осећај ваше веб локације у ходу. Користећи ЈаваСцрипт, можете ажурирати вредности ових променљивих и видети промене које се одражавају на вашем сајту.
Важно је напоменути да ће се промене направљене помоћу ЈаваСцрипт-а применити само на тренутну сесију. Морате или ажурирати оригинални извор или сачувајте нову вредност на клијенту, као у колачићу, да би се наставиле промене.
Ево примера како да користите ЈаваСцрипт за ажурирање вредности ЦСС променљиве.
ХТМЛ:
хтмл>
<хтмлланг="ен">
<глава>
<наслов>ЦСС променљиве – варијације дугметанаслов>
<линкрел="стилесхеет"хреф="Вариаблес.цсс" />
<скрипта>
функцијапроменити боју() {
// Добијате елемент на коме желите да промените променљиву
конст миЕлемент = документ.куериСелецтор(":корен");// Добија тренутну вредност променљиве
дозволити цуррентВалуе = гетЦомпутедСтиле (миЕлемент).гетПропертиВалуе(
"--секундарни"
);
// Комплет тхе Новавредностза тхе променљива
миЕлемент.стиле.сетПроперти("--секундарни", "#ДАФ7А6");
}
скрипта>
глава>
<тело>
<див>
<х1>ЦСС променљивех1>
<див>
ЦСС:
:корен {
--Примарна: #900ц3ф;
--секундарно: #фф5733;
}.бтн {
паддинг: 1рем 1.5рем;
позадина: транспарентна;
фонт-веигхт: 700;
}
.под-примарни {
боја: вар(--Примарна);
боја позадине: вар(--секундарни);
}
У овом ЈаваСцрипт коду, променити боју() функција ажурира боју првог дугмета када корисник кликне на њега.
Користећи ДОМ методе обилажења, можете приступити класама или селекторима примењеним у вашем ХТМЛ документу и манипулисати вредностима.
Пре него што кликнете на дугме:
Након што кликнете на дугме:
Такође можете користити ЈаваСцрипт да бисте креирали нове ЦСС променљиве или их потпуно уклонили.
На пример:
// Креирај а Новапроменљива
документ.доцументЕлемент.стиле.сетПроперти('--нова-боја', 'Плави');
// Уклони променљиву
документ.доцументЕлемент.стиле.ремовеПроперти('--нова-боја');
Коришћење ЦСС променљивих са претпроцесорима
Коришћење променљивих унутар фронтенд технологије је у почетку постигнуто са ЦСС претпроцесорима као што су САСС, ЛЕСС и оловка.
Сврха ЦСС претпроцесора је да развију код који проширује основне могућности стандардног ЦСС-а. Затим нека се тај код компајлира у стандардни ЦСС како би прегледач разумео, слично како ТипеСцрипт ради са ЈаваСцрипт-ом.
Са развојем ЦСС варијабли, претпроцесори више нису толико важни, али и даље могу понудити одређену употребу ако се комбинују са ЦСС варијаблама у вашем пројекту.
Можете дефинисати САСС променљиву $маин-цолор и користите га за подешавање вредности ЦСС променљиве. Затим користите ЦСС променљиву у класи регуларног стила.
Такође можете користити САСС функције за манипулисање вредностима ЦСС променљивих.
На пример:
:корен {
--примарни: $маин-цолор;
--секундарно: осветлити (вар(--Примарна), 20%);
}
.бтн {
боја: вар(--Примарна);
боја позадине: вар(--секундарни);
}
Овде, САСС функција лигхтен() манипулише вредношћу --Примарна да се добије вредност за --секундарни.
Имајте на уму да САСС променљиве нису доступне ЈаваСцрипт-у. Дакле, ако треба да манипулишете вредностима ваших променљивих током времена извршавања, требало би да користите ЦСС променљиве.
Користећи ЦСС променљиве и претпроцесоре заједно, можете искористити обе предности, као што је коришћење моћне функције предпроцесора као што су петље и функције и ЦСС променљиве као што је ЦСС каскадно.
Савети за коришћење ЦСС променљивих у веб развоју
Ево неколико важних савета који ће вам помоћи да боље користите ЦСС варијабле.
Почните са јасном конвенцијом о именовању
Одаберите конвенцију именовања за своје варијабле која их чини лаким за разумевање и употребу. На пример, користите префикс као што је --боја- за променљиве боје или --размак- за променљиве размака.
Користите променљиве у медијским упитима да бисте олакшали прилагођавање дизајна различитим величинама екрана.
Искористите предност каскадне природе ЦСС-а
Запамтите да су ЦСС променљиве каскадне, што значи да ако поставите променљиву на родитељски елемент, то ће утицати на све његове потомке.
Користите ЦСС променљиве са опрезом
Коришћење превише ЦСС променљивих може да изазове забуну, па их користите опрезно и само када има смисла и побољшава могућност одржавања вашег кода.
Тестирајте своје варијабле
ЦСС променљиве су јединствен начин за писање јасног кода који се може одржавати унутар вашег стилског листа.
Важно је напоменути да они још увек нису у потпуности подржани на свим претраживачима. Према томе, требало би да тестирате своје варијабле на компатибилност претраживача да бисте били сигурни да раде како се очекује и да све резервне вредности раде онако како очекујете.