Једна од ствари која ЦСС Он подразумевано не користи структуре у стилу програмирања у којима можемо поново да користимо код на логичан начин. Највише што можемо постићи на стандардан начин је креирање класа и груписање унутар ознака на шта желимо да утичемо ове промене.
Овај приступ значи да на крају дана завршавамо са дугим стиловима, и иако се тај резултат неће разликовати коришћењем Лесс.јс, ако се начин на који долазимо до наведених листова промени, то је захваљујући Микинс и наслеђивање, где можемо да декларишемо и користимо неке компоненте, како бисмо избегли да морамо ручно да развијамо структуре.
Захтеви1- Да бисмо извршили овај водич, требат ћемо вам неке ствари унапријед, морамо имати фасциклу у коју можемо похранити наше датотеке .мање И .цсс, морамо имати дозволе за то како бисмо могли уносити промјене ако је потребно.
2- Морамо имати функционалну инсталацију Лесс.јс, као и све његове предуслове, какви јесу Ноде.јс И нпм, тако да можемо саставити генериране стилске листове.
3- Коначно, биће нам потребан и уређивач текста да бисмо могли да направимо код који можемо да користимо Узвишени текст о НотеПад ++, иако ће нам класични нотепад такође радити, све зависи од тога да ли желимо помоћ око кода или напредних функција.
Подесите ЦСС својства помоћу МикинаЈедна од првих ствари о којима треба да знамо Микинс, је да су то методе које нам помажу да успоставимо својства ЦСС за наш пројекат, на начин да нам помогне у поновној употреби кода и постизању доследнијих стилова. Посебност Микина је у томе што приликом састављања нашег кода Мање Ово се не узима у обзир, у смислу да се не ствара таблица са стилом Микинс -а, то се постиже укључивањем заграда при њиховом дефинисању, када имамо Микин, морамо увести његову изворну датотеку и на овај начин једноставно су његове вредности пренети на наш главни лист који ћемо укључити на нашу страницу.
Стварање нашег првог Микин
Креирајмо а Микин то нам омогућава да успоставимо власништво ЦСС да заокружимо ивице елемента у нашем ХТМЛ, за ово морамо следити следеће кораке:
1- У нашој фасцикли пројекта креираћемо датотеку под називом микинс.лесс, а унутра ћемо поставити следећи садржај:
.роундед-едге () {бордер-радиус: 7пк; }2- Сада ћемо креирати датотеку под називом пројекат.нема, овде ћемо успоставити начин на који ће се различити стилови наше странице примењивати ХТМЛ, тако да се навикнемо на рад Мање ми ћемо створити неколико правила ЦСС тако да можемо видети како се МикинсПогледајмо код који морамо ставити у ову датотеку.
@импорт "микинс.лесс"; @ хеадер-бацкгроунд-цолор: блуе; @ цонтент-бацкгроунд-цолор: зелена; @ фоотер-бацкгроунд-цолор: ред; заглавље {. заобљене ивице (); бацкгроунд-цолор: @ хеадер-бацкгроунд-цолор; боја: контраст (@ хеадер-бацкгроунд-цолор); } п {.роундед-едге (); бацкгроунд-цолор: @ цонтент-бацкгроунд-цолор; боја: контраст (@ цонтент-бацкгроунд-цолор); } фоотер {. роундед-едге (); бацкгроунд-цолор: @ фоотер-бацкгроунд-цолор; боја: контраст (@ фоотер-бацкгроунд-цолор); }Као што видимо, почињемо увозом датотеке коју смо генерисали у претходном кораку, затим успостављамо 3 променљиве којима дајемо боју као вредност, на крају почињемо да стварамо класе за елементе ХТМЛ, прва ствар коју радимо је да позовемо своју функцију Заобљене ивице (), а затим променљивим додељујемо боје елемената.
3- У овом кораку ћемо креирати датотеку ХТМЛ, које можемо назвати како год желимо све док има структуру попут ове:
Микинс витх Лесс Ла цабецераКао што видимо, једноставно смо извршили укључивање наше датотеке .мање као .јс који садржи алатку, одлучили смо се за ову опцију како не бисмо морали да компајлирамо, међутим морамо имати на уму да то не треба примењивати у производњи. У телу ХТМЛ Генеришемо различите елементе које смо дефинисали у ЦСС -у како бисмо видели примену стилова.Садржај
Подножје
4- Коначно, ако желимо да видимо резултат, само отворимо наш документ у прегледачу попут Фирефок и тако да можемо видети како све изгледа, хајде да видимо на следећој слици шта смо добили:
Ако одемо мало даље и видимо изворни код који прегледач тумачи, видећемо како се различите променљиве и Микин примењен, заправо је замењен кодом ЦСС, што значи да чак и ако смо имовину написали само једном Мање поставимо тамо где одговара подударању, да видимо:
Тхе Херитаге у оквиру наших стилова
Рад са наслеђем је нешто што нам помаже и то је из разлога што можемо створити супериорне елементе који нека својства преносе на њихове инфериорне или садржане елементе, односно постоје заједничке карактеристике које нећемо морати понављати у елементима које желимо да их има.
Као и увек, циљ непонављања кода је уштеда на послу и времену, као и смањење грешака и повећање одржавања нашег кода захваљујући доследности и централизацији његових ресурса.
Један од најосновнијих, али најефикаснијих начина за наслеђивање је са угнежђеним елементима, рецимо да имамо одељак ХТМЛ а унутра ћемо имати неколико елемената, ако користимо ЦСС Класично је рећи да сви елементи тог одељка имају нека својства, али она су различита, било би потребно направити бар једну линију за сваки стил, да видимо на шта мислимо:
елемент елемент1 {садржај1: кк; } елемент елемент2 {цонтент2: зз; }Као што видимо, ми правимо више кода него што би нам требало, уместо тога ако користимо наслеђивање и угнежђење Мање могли бисмо постићи нешто попут следећег:
одељак {елемент1 {цонтент1: кк; } итем2 {цонтент2: зз; }}Као што видимо, не само да мање пишемо, већ је и репрезентација онога што желимо постићи много логичнија, што нам помаже да разумемо и правилно одвојимо елементе које ћемо користити у својим стиловима.
Креирање угнежђени стилови
Сада ћемо применити оно што смо управо објаснили у претходној тачки, морамо да направимо датотеку .мање где правимо стил који је угнежђен, како бисмо уштедели рад и учинили га логичнијим. Да бисмо постигли овај задатак, морамо следити следеће кораке:
1- Хајде да направимо датотеку.мање како можемо назвати наследство.нема, овде ћемо креирати угнежђене стилове, да бисмо то разумели, једноставно ћемо видети код који ћемо поставити и тиме ће нам концепт доћи на бољи начин.
одељак {х1 {фонт-сизе: 4ем;} п {паддинг: 0 5пк;}}Видимо да смо створили стил за елемент одељак, и то све х1 или п унутар тог контејнерског елемента мора радити са утврђеним правилима која смо угнездили.
2- Сада морамо креирати нашу датотеку ХТМЛ која ће много личити на претходну вежбу, које промене су имена датотека које треба укључити и структура унутар тело, али ако то видимо апстрактно, говоримо о истој ствари, погледајмо код.
Наслеђивање у МањеКао што видимо једноставно укључивањем наше датотеке Мање је да ћемо генерисати потребне стилове, ако видимо како то изгледа у прегледачу, добићемо нешто попут следећег:Наш садржај
Међутим, ако приметимо шта се дешава са ЦСС Када се интерпретира или компајлира, видећемо да се угнежђени облик који смо изградили не поштује, али пошто компајлер прави овај не-угнежђени облик, не морамо да бринемо да ли је то на овај начин, да видимо шта је код који прегледач види изгледа овако:
Овим можемо завршити овај водич, као што смо видели Мање то није само писање ЦСС на другачији начин, учинити те разлике корисним, што нас доводи до уштеде времена, прилагођавања апликација нашем развојном тиму и уштеде напора логичним размишљањем и поновном употребом компоненти. Начин на који нам све ово има највише смисла је да наставимо да вежбамо и примењујемо ове примере у практичним и стварним случајевима како бисмо се навикли на овакав начин рада.
Да ли вам се допао и помогао овај водич?Можете наградити аутора притиском на ово дугме да бисте му дали позитиван поен
