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

Абсолютно всички опитни уеб дизайнери използват Препроцесорът. Все още няма изключения. Ако искате да успеете в тази дейност, не забравяйте за тези програми. На пръв поглед, те могат да причинят новак тих ужас - това е твърде сходен с програмирането! Всъщност, можете да се справят с всички характеристики на CSS предпроцесорни за около един ден, и ако се опитате, а след това за няколко часа. В бъдеще, те значително ще опрости живота си.

Как CSS предпроцесорни

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

Когато едва сега започва масовото използване на Интернет, без стилови таблици не са съществували. Изпълнение на документи зависи изцяло от браузъра. Всеки от тях има свои собствени стилове, които са били използвани за лечение на някои маркери. В съответствие с това на страниците изглеждат по различен начин в зависимост от реда, по който браузърът, който ги отворите. Резултатът - на хаос, объркване, проблеми за разработчици.

През 1994 г. норвежки учен Håkon Lie разработи лист със стилове, които биха могли да бъдат използвани за външния вид на страниците отделно от HTML-документ. Членовете на идея priglanulas на W3C, който веднага се заема до завършването. Няколко години по-късно той публикува първата версия на спецификацията на CSS. Тогава тя се подобрява непрекъснато, в процес на финализиране ... Но концепцията остава все едно: всеки стил зададете определени свойства.

Използване на CSS таблици винаги е било проблематично. Например, уеб дизайнери често са имали проблеми с сортиране и групиране на функции, както и наследството не е толкова прост.

И тогава дойде две хилядна. Маркировка все по-често започват да се занимават с професионални предния край на разработчиците, което е важно да бъдем гъвкави и динамични стилове на работа. Съществували в поставянето на времеви поиска CSS представки и проследяване на подкрепа на новите възможностите на браузъра. След това, чрез JavaScript, както и експерти Ruby слязоха към бизнеса, създаване на предпроцесорни - надстройка за CSS, се добавят нови функции към него.

CSS за начинаещи: предпроцесорни функции

Те имат няколко функции:

• обедини префикси на браузъра и каки;

• опрости синтаксис;

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

• подобряване логика стайлинг.

Накратко: Препроцесорът добавя CSS възможности за програмиране логика. Сега, стайлинг не се извършва по обичайния изброяването на стилове и с няколко прости техники и подходи: променливи, функции, техни подобни, цикли условия. Освен това, възможността за използване на математика.

Виждайки популярността на тези добавки, W3C, са започнали постепенно да се добави възможността да ги в кода на CSS. Например, в описанието, така че функцията изчислено (), който се поддържа от много браузъри. Очаква се, че скоро ще бъде възможно да се създаде променливи и да се създаде техни подобни. Все пак, това ще се случи в далечното бъдеще, а Препроцесори вече тук и вече работи добре.

Популярни Препроцесори CSS. дръзки приказки

Създаден през 2007 година. Първоначално компонент Haml - шаблон HTML. Нови функции на CSS елементи контролират наслади на разработчиците на Руби на релси, който започна да се разпространява навсякъде. В Sass огромен брой функции, които вече са включени в който и да е предпроцесорни: променливи, вграждането на селектори, (след това, обаче, не могат да се добавят тези аргументи) техни подобни.

Деклариране на променливи в Sass

Променливите, декларирани със знака $. Те могат да запазят своите качества и комплекти, например: "$ borderSolid: 1px твърдо червено;". В този пример, ние декларирахме променлива, наречена borderSolid и спаси го ценим 1px плътно червени. Сега, ако в CSS, ние трябва да се създаде граница широчина 1 пиксел червено, просто показва, че променливата след името на собственост. След обявяването на променливите не може да бъде променено. Има няколко вградени функции. Например, да декларира променлива със стойност от $ redcolor # FF5050. Сега, в CSS кода в свойствата на всеки елемент, използвайте го, за да настроите цвета на шрифта: P {цвят: $ redColor; }. Искате ли да експериментирате с цветовете? Използвайте функцията или потъмнете. Това се извършва така: р {цвят: потъмняване ($ redColor, 20%); }. В резултат на това на цвят redColor ще бъде с 20% по-лек.

Най-много вградени функции Sass. Заслужава най-малко ги четат, но по-добре - да се научат.

гнездене

По-рано, за да покаже, разкрой трябваше да се използва дълго и неприятно дизайн. Представете си, че имаме Разделение, което е р и в нея, от своя страна, определен от време. За DIV, ние трябва да се определи цвета на шрифта червено, за р - жълто, за педя - розово. В типичен CSS, че ще бъде направено, както следва:

Разделение {

Цвят: червен;

}

Разделение р {

Цвят: жълт;

}

Разделение р период {

Цвят: розов;

}

С CSS предпроцесорни всичко става по-лесно и по-компактен:

Разделение {

Цвят: червен;

р {

Цвят: жълт;

.span {

Цвят: розов;

}

}

}

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

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

Използването на директиви @import да импортирате файлове. Например, ние имаме fonts.sass файл, който декларира, стиловете за шрифтове. Свържете го към главния файл style.sass: @import "шрифтове". Готово! Вместо това на един голям файл с стиловете имаме няколко, които могат да се използват за бърз и лесен достъп до необходимите качества.

техни подобни

Един от най-интересните идеи. То позволява ред да попитам набор от качества. Работете, както следва:

@mixin largeFont {

шрифт семейство: "Times New Roman";

шрифта: 64px;

Онлайн-височина: 80px;

шрифт тегло: удебелен шрифт;

}

Техни подобни да се прилага за елемент на страницата, използвайте директива @include. Например, ние искаме да го прилага по отношение на заглавието на h1. В момента има следната структура: h1 {@include: largeFont; }

Всички свойства на техни подобни са предназначени за h1 елемент.

По-малко предпроцесорни

Синтаксис Sass припомня програмиране. Ако търсите за една опция, която е по-подходяща за начинаещи, изучаващи CSS, за по-малко гледам. Тя е създадена през 2009 година. Главната особеност - подкрепа за CSS родния синтаксис, така че не са запознати с програмирането Imposer тя ще бъде по-лесно да се учи.

Променливите са декларирани като се използва символа @. Например: @fontSize: 14px. Гнезда работи на същите принципи, както в Sass. Техни подобни са обявени, както следва: .largeFont () {шрифт семейство: "Times New Roman"; шрифта: 64px; Онлайн-височина: 80px; шрифт тегло: удебелен шрифт; }. За да се свържете, не е необходимо да се използват директиви предпроцесорни - просто добавете новосъздадената техни подобни на свойствата на избрания елемент. Например: h1 {.largeFont; }.

стълбче

Друг предпроцесорни. Създадена през 2011 г. от същия автор, който е дал на света на нефрит, Express и други полезни продукти.

Променливите могат да бъдат обявени по два начина - пряко или косвено. Например: на шрифта = "Times New Roman"; - имплицитен опция. Но $ шрифта = "Times New Roman" - ясно. Техни подобни са обявени и косвено свързани. Синтаксисът е както следва: redColor () Цвят червено. Сега можем да добавите елемента, например: h1 redColor ();.

Stylus на пръв поглед може да изглежда неразбираемо. Къде е на "родния" скоби и запетаи? Но е необходимо да се потопите в нея, всичко става много по-ясно. Не забравяйте обаче, че в дългосрочен план за развитие на този предпроцесорни може да "отбият" използвате класически синтаксиса на CSS. Това понякога води до проблеми, когато се налага да се работи с "чист" стил.

Какво предпроцесорни избера?

В действителност, това е ... това няма значение. Всички версии предлагат за същите функции, само синтаксиса на всеки е различен. Ние препоръчваме да се процедира, както следва:

• ако - програмист и искате да работите с стилове, както в код, използвайте Sass;
• ако - програмист и искате да работите с стилове и с конвенционален оформлението, обърнете внимание на по-малко;
• ако искате минимализъм, използвайте писалката.

За всички варианти на безкрайно много интересни библиотеки, които могат още повече опростяват разработката. Потребители Sass препоръчва да се обърне внимание на компаса - мощен инструмент с много вградени функции. Например, след като го инсталирате, че никога няма да се притеснявате за префикс продавач версия. Улеснява работата с мрежи. Има инструменти за работа с цветя, спрайтове. Редица вече обяви, техни подобни. Дайте този инструмент няколко дни - по този начин ще се спести много време и усилия в бъдеще.