CSS препроцесори: преглед, избор, примена

Апсолутно, сите искусни дизајнери користат препроцесори. Нема исклучоци. Ако сакате да успеете во оваа активност, не заборавајте за овие програми. На прв поглед, тие можат да предизвикаат тивка ужас на почетниците - тоа е премногу слично на програмирање! Всушност, можете да ги разберете сите можности на прецесорите на CSS за еден ден, и ако се обидете, тогаш за неколку часа. Во иднина, тие значително ќе го поедностават вашиот живот.

Како се појавија прецесорите на CSS

За подобро разбирање на карактеристиките на оваа технологија, накратко се потопи во историјата на развојот на визуелната репрезентација на веб-страници.

Кога масовната интернет апликација беше само почеток, немаше стилски листови. Дизајнот на документи зависи само од прелистувачите. Секој од нив имаше свои стилови, кои беа користени за обработка на одредени ознаки. Соодветно на тоа, страниците изгледаа различно во зависност од кој прелистувач ги отворивте. Резултатот е хаос, конфузија, проблеми за програмери.

Во 1994 година, норвешкиот научник Хакон Ли развил стилски лист што може да се користи за дизајнирање на изгледот на страницата одделно од HTML-документот. Идејата беше поканета на претставниците на W3C конзорциумот, кој веднаш почна да работи на тоа. Неколку години подоцна, беше објавена првата верзија на спецификацијата на CSS. Потоа постојано се подобруваше, подобруваше ... Но, концептот остана ист: секој стил е даден со одредени својства.

Употребата на табели на CSS отсекогаш предизвикала некои проблеми. На пример, кодер честопати имаше потешкотии при сортирање и групирање на својствата, а наследството не е толку едноставно.

А потоа дојдоа две илјадити. Професионалните професионалци од предната линија почнаа почесто да прават селектирање, за што е важно флексибилно и динамично работење со стилови. CSS што постоеше во тоа време бараше префиксирање и следење на поддршка за нови функции на прелистувачот. Тогаш експертите за JavaScript и Ruby се свртија кон бизнисот, создавајќи препроцесори - додатоци за CSS, додавајќи нови карактеристики на неа.

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

Тие вршат неколку функции:

• Унифицирај префикси на прелистувачот и хаки;

• Поедноставување на синтаксата;

• Дозволи да работи со вгнездени селектори без грешки;

• Подобрете ја логиката на стил.

На кратко: препроцесорот додава логика на програмирање на CSS способности. Сега стилувањето не се врши со вообичаеното набројување на стилови, туку со помош на неколку едноставни трикови и пристапи: променливи, функции, миксини, циклуси, услови. Покрај тоа, стана можно да се користи математика.

Гледајќи на популарноста на ваквите додатоци, W3C почна постепено да додава карактеристики од нив на кодот CSS. На пример, функцијата calc () се појави во спецификацијата, која е поддржана од многу прелистувачи. Се очекува дека наскоро ќе биде можно да се постават варијабли и да се создадат миксини. Сепак, ова ќе се случи во далечна иднина, а препроцесорите се веќе тука и веќе работат совршено.

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

Таа беше развиена во 2007 година. Тоа беше првично компонента на Хамл, моторот на HTML шаблонот. Нови функции за управување со CSS елементи дојдоа до вкус на програмери на Ruby on Rails, кои почнаа да го шират насекаде. Во Sass се појави огромен број на можности кои сега се вклучени во било кој препроцесор: променливи, вметнувачки селектори, mixins (тогаш, сепак, не можете да додадете аргументи за нив).

Објавува променливи во Сас

Променливите се прогласени со користење на знакот $. Во нив, можете да ги зачувате својствата и нивните множества, на пример: "$ borderSolid: 1px цврсто црвено;". Во овој пример, ние прогласивме променлива наречена borderSolid и ја зачувавме вредноста 1px цврсто црвена во неа. Сега, ако во CSS ние треба да создадеме црвена граница со ширина од 1px, едноставно ја наведуваме оваа променлива по името на имотот. По декларацијата, променливите не може да се променат. Постојат неколку вградени функции. На пример, прогласи променлива $ redColor со вредноста # FF5050. Сега, во CSS, во својствата на елементот, ние го користиме за да ја наместите бојата на фонтот: p {color: $ redColor; }. Дали сакате да експериментирате со боја? Користете ги функциите потемни или осветлени. Ова е направено вака: p (боја: потемна ($ redColor, 20%); }. Како резултат на тоа, бојата на redColor ќе биде 20% полесна.

Сас има многу вградени функции. Ви препорачуваме барем да се запознаете со нив, и подобро - да научите.

Вгнездување

Претходно, за означување на гнездење, моравме да користиме долги и незгодни дизајни. Замислете дека имаме див во кој лежи, а во него, пак, е распон. За div, ние треба да ја наместите бојата на фонтот на црвено, за п-жолта, за период-розева боја. Во обичните CSS, ова би било направено вака:

Div {

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

}

Div p {

Боја: жолта;

}

Div p span {

Боја: розова;

}

Со препроцесорот на CSS, сè е олеснето и покомпактно:

Div {

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

P {

Боја: жолта;

.span {

Боја: розова;

}

}

}

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

Директиви за препроцесори

Со @import директивата, можете да увезете датотеки. На пример, имаме датотека наречена fonts.sass, во која се објавуваат стилови за фонтови. Ние го поврзуваме со главната датотека style.sass: @import 'fonts'. Готово! Наместо една голема датотека со стилови, имаме неколку што можете да ги користите за брзо и лесно пристап до потребните својства.

Mixins

Еден од најинтересните zadumok. Овозможува еден налог на својства да биде наведен во една линија. Работете како што следува:

@mixin largeFont {

Фонт-семејство: "Times New Roman";

Фонт-големина: 64px;

Линија-висина: 80px;

Фонт-тежина: задебелен фонт;

}

За да примените мешање на елемент на страница, користете ја @include директивата. На пример, сакаме да го примениме во насловот h1. Се добива следнава конструкција: h1 {@include: largeFont; }

Сите својства од микшинот ќе бидат доделени на елементот h1.

Помалку препроцесор

Синтаксата Сасс потсетува на програмирање. Ако барате опција која е попогодна за учениците да учат CSS за почетници, погледнете во помалку. Таа е основана во 2009 година. Главната карактеристика е поддршката на мајчин CSS синтаксата, така што е полесно да се научи со странци кои не се запознаени со програмирањето на кодерот.

Променливите се декларираат со симболот @. На пример: @fontSize: 14px; Вгнездувањето работи на истите принципи како и во Сас. Mixins се декларираат како што следува: .largeFont () {font-family: 'Times New Roman'; Фонт-големина: 64px; Линија-висина: 80px; Фонт-тежина: задебелен фонт; }. За поврзување, не треба да користите препроцесорски директиви - само додадете свежо креирано мешање на својствата на избраниот елемент. На пример: h1 {.largeFont; }.

Стилус

Уште еден препроцесор. Создаден во 2011 година од страна на истиот автор кој го даде светот Jade, Express и други корисни производи.

Варијаблите може да се декларираат на два начина - експлицитно или имплицитно. На пример: font = 'Times New Roman'; Е имплицитна опција. Но, $ font = 'Times New Roman' - експлицитно. Миксините се декларираат и се поврзани имплицитно. Синтаксата е: redColor () црвена боја. Сега можеме да го додадеме на елементот, на пример: h1 redColor ();.

На прв поглед, Stylus може да изгледа неразбирливо. Каде се "мајчин" загради и запирки? Но, ако само се нурне во него, сè станува многу појасно. Сепак, запомнете дека долгиот развој со овој препроцесори може да "одвикне" да користите класична CSS синтакса. Ова понекогаш предизвикува проблеми кога треба да работите со "чисти" стилови.

Кој препроцесор треба да го изберам?

Всушност, тоа ... не е важно. Сите опции обезбедуваат приближно исти можности, само синтаксите на секоја од нив се различни. Препорачуваме да постапите на следниов начин:

• Ако сте програмер и сакате да работите со стилови како код, користете Sass;
• Ако сте дизајнер на распоред и сакате да работите со стилови како со вообичаениот изглед, обрнете внимание на помалку;
• Ако ви се допаѓа минимализмот, користете Stylus.

За сите опции е достапен огромен број на интересни библиотеки што дополнително го поедноставуваат развојот. Корисниците на Sass се препорачуваат да обрнат внимание на Compass - моќна алатка со многу вградени функции. На пример, по инсталацијата, никогаш нема да мора да се грижите за префикси на продавачите. Поедноставна работа со мрежи. Постојат алатки за работа со бои, спори. Голем број на веќе декларирани миксини се достапни. Дајте му на оваа алатка неколку дена - а со тоа ќе ви заштедиме многу време и енергија во иднина.