Препроцесор ЦСС: преглед, селекција, апликација

Апсолутно сви искусни веб дизајнери користе предпроцесор. Нема изузетака. Ако желите да успете у овој активности, не заборавите о овим програмима. На први поглед, могу да изазову почетник тихо ужас - сувише је сличан програму! У ствари, можете носити са свим карактеристикама ЦСС Препроцессор за један дан, а ако покушате, онда пар сати. У будућности, они ће значајно поједноставити свој живот.

Како је ЦСС предпроцесор

Да би боље разумели карактеристике ове технологије, укратко прекапати у историји визуелну презентацију веб странице.

Када тек почели масовно коришћење интернета, нема Стиле Схеетс не постоји. Извршење докумената зависила искључиво на претраживачу. Сваки од њих је имао своје стилове, који су коришћени за лечење одређених ознака. Сходно томе, странице изгледа другачије у зависности од реда у коме је браузер их отворите. Резултат - хаос, конфузија, проблеми за програмере.

Године 1994., норвешки научник Хакон Лие развио лист стила који се може користити за наступ на страницама одвојено од ХТМЛ-документа. Идеја пригланулас Чланови В3Ц, који је одмах изложен до завршетка. Неколико година касније објавио је прву верзију ЦСС спецификације. Онда је константно унапређивати, у завршној фази ... Али концепт остао све исто: сваки стил сет одређене особине.

Коришћење ЦСС табеле је увек била проблематична. На пример, веб дизајнери често имао проблема са сортирање и груписање функције, а наслеђивање није тако једноставно.

И онда је дошла два хиљадити. Ознаке се све више почео да се бави професионалним фронт-енд програмера, што је важно бити флексибилни и динамични начини рада. Постојало у пласману време захтевала ЦСС префикси и праћење подршку нове могућности прегледача. Онда, ЈаваСцрипт, и Руби стручњаци добио на посао, стварајући предпроцесор - надградњу за ЦСС, нове карактеристике додају на то.

ЦСС за почетнике: препроцессор карактеристике

Они имају неколико функција:

• ујединити прегледача префикса и каки;

• поједноставити синтаксе;

• дати прилику да раде са угнежђених селекторима без грешака;

• побољшати логика стил.

Укратко: Претпроцесор додаје ЦСС програмирање логичких способности. Сада, стил не врши у уобичајеном листинг стилова и са неколико једноставних техника и приступа: променљиве, функције, Хагфисх, циклуса услове. Поред тога, способност да користе математику.

Видевши популарност ових додатака, В3Ц су почели да постепено додати могућност њих у коду ЦСС. На пример, у спецификацији тако да изр () функцију, која је подржана од стране многих претраживача. Очекује се да ће ускоро бити могуће поставити променљиве и створити Хагфисх. Међутим, то ће се десити у далекој будућности, а препроцессорс већ овде и већ добро раде.

Популаран препроцессорс ЦСС. сасс

Дизајниран у 2007. години. Првобитно компонента ХАМЛ - шаблон ХТМЛ-а. Нове функције за ЦСС елемената контролу уживао програмерима на Руби он Раилс, која је почела да се шири свуда. Живахност велики број функција које су сада укључени у било ком Препроцессор: варијабли, уградња селектора, Хагфисх (тада, међутим, не може да се дода ови аргументи).

Проглашавају променљиве у Сасс

Варијабле проглашен са $ знаком. Они могу да одржавају своју имовину и сетове, на пример: "$ бордерСолид: 1пк солид ред;". У овом примеру, прогласио смо променљиву названу бордерСолид и спасио га ценимо 1пк солид ред. Сада, ако у ЦСС морамо да створимо црвеним оквиром ширине 1пк, једноставно указује да променљиву иза имена имовине. Након најаве варијабли се не може променити. Постоји неколико уграђених функција. На пример, прогласи променљиву у вредности од $ редцолор # ФФ5050. Сада, у ЦСС коду у својствима сваког елемента, користите га да поставите боју слова: п {цолор: $ редЦолор; }. Да ли желе да експериментишу са бојама? Користити функције потамне или разведрити. То се ради тако: П {боја: даркен ($ редЦолор, 20%); }. Као резултат тога, редЦолор боја ће бити 20% лакши.

У Сасс много уграђених функција. Вреди најмање их прочитали, али боље - да науче.

тражење гнезда

Раније, да укаже Нестинг морали да користе дуго и непријатно дизајн. Замислите да имамо див, који је п, и у њему, заузврат, сет век. За див, треба да поставите боју слова црвене, за п - жуте, за распон - розе. У типичном ЦСС то ће бити учињено на следећи начин:

див {

боја: црвена;

}

див стр {

цолор: иеллов;

}

див стр п {

боја: розе;

}

Са ЦСС Препроцессор све постаје лакше и компактан:

див {

боја: црвена;

п {

цолор: иеллов;

.спан {

боја: розе;

}

}

}

Елементи буквално "уложио" један другог.

препроцессор директиве

Користећи @импорт директиве може да увезе датотеке. На пример, имамо фонтс.сасс датотеку која изјављује стилове за фонтове. Спојите га на главни фајл стиле.сасс: @импорт 'фонтове'. Готово! Уместо једног великог датотеку са стиловима имамо неколико који може да се користи за брз и лак приступ до тражених особина.

Хагфисх

Један од најзанимљивијих идеја. Он омогућава једну линију да поставља низ особина. Раде на следећи начин:

@микин ларгеФонт {

фонт-сизе: "Тимес Нев Роман";

фонт-сизе: 64пк;

лине-хеигхт: 80пк;

фонт-веигхт: болд;

}

Хагфисх да се пријаве на елемент на страници, користите директиву @инцлуде. На пример, желимо да га се односе на заглављу Х1. Ми имају следећу структуру: Х1 {@инцлуде: ларгеФонт; }

Све особине Хагфисх је додељен х1 елемент.

препроцесор Мање

Синтакса кориснику Сасс подсећа програмирање. Ако сте у потрази за опцију која је погоднија за почетнике студирају ЦСС, тражити мање. Направљен је 2009. године. Главна карактеристика - подршка за ЦСС родном синтаксу, па нису упознати са програмским Импосер да ће бити лакше да уче.

Варијабле су прогласили помоћу @ симбол. На пример: @фонтСизе: 14пк;. Нестинг радови на истим принципима као у Сасс. Хагфисх су најавили како слиједи: .ларгеФонт () {фонт-сизе: "Тимес Нев Роман"; фонт-сизе: 64пк; лине-хеигхт: 80пк; фонт-веигхт: болд; }. Да бисте се повезали није потребно користити препроцессор директиве - само додајте новокреирани Хагфисх у својства изабраног елемента. На пример: х1 {.ларгеФонт; }.

грамофонска игла

Други препроцесор. Креирано у 2011. години од стране истог аутора, који је дао свет Јаде, Екпресс и друге корисне производе.

Променљиве могу бити проглашени на два начина - или експлицитно или имплицитно. На пример: фонт = "Тимес Нев Роман"; - имплицитно опција. Али $ фонта = "Тимес Нев Роман" - јасан. Хагфисх су проглашени и имплицитно повезан. Синтакса је следећа: редЦолор () Боја црвена. Сада можемо додати ставку, на пример: Х1 редЦолор ();.

Стилус на први поглед може изгледати несхватљиво. Где је "нативе" конзоле и зарез? Али је неопходно да уроните у њу, све постаје много јасније. Запамтите, међутим, да је дугорочни развој овог Препроцессор може да "одврати" користите класични ЦСС синтаксе. Ово понекад доводи до проблема када морају да раде са "чистом" стилу.

Шта препроцесор изабрати?

У ствари, то је ... то није битно. Све верзије нуде о истим карактеристикама само синтакса сваки је другачији. Препоручујемо да поступите на следећи начин:

• ако - програмер и желе да раде са стиловима иу коду, користе Сасс;
• ако вас - кодер и желе да раде са стиловима као и са конвенционалним распоредом, обратите пажњу на мање;
• Ако желите минимализам, користите оловку.

За све варијанте бескрајног броја занимљивих библиотека које могу још више поједностављује развој. Корисници Сасс предлагао да обрате пажњу на Цомпасс - моћан алат са многим уграђеним функцијама. На пример, након што га инсталирате никада нећете морати да бринете о продавац верзија префикс. Поједностављује рад са решеткама. Постоје алати за рад са цвећем, духови. Распон већ најавио Хагфисх. Дајте Овај алат неколико дана - тако ћете уштедети много времена и труда у будућности.