CSS Preprocessor: Общ преглед, избор, приложения

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

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

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

През 1994 г. норвежкият учен, Hookon, разработи лист със стил, който може да се използва, за да направи външния вид на страницата по-различен от HTML документа. Идеята беше спонсорирана от представители на консорциума W3C, който веднага се ангажира да го финализира. Няколко години по-късно беше пусната първата версия на CSS спецификацията. Тогава тя непрекъснато се усъвършенства, усъвършенства. Но концепцията остава същата: на всеки стил се дават определени свойства.Използването на CSS таблици винаги е създавало някои проблеми. Например дизайнерите често срещат трудности при сортирането и групирането на имоти, а с наследяването не всичко е толкова недвусмислено. И сега те дойдоха две хиляди. Марката все повече започва да се заема от професионални разработчици, за които е важна гъвкавата и динамична работа със стиловете. По това време CSS изискваше поставяне на префикс и проследяване на поддръжката за нови възможности на браузъра. След това специалистите на javascript и Ruby се заеха с въпроса чрез създаване на препроцесори - добавки за CSS, добавяйки нови функции към него.

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

Те изпълняват няколко функции:

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

опростяване на синтаксиса;

осигуряват възможност за работа с вградени селектори без грешки;

подобряват логиката на стилизацията.

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

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

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

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

Sass има много вградени функции. Препоръчваме ви поне да се запознаете с тях и да ги изучите.

Приложение

По-рано, за да се посочи гнезденето, трябва да се използват дълги и неудобни конструкции. Представете си, че имаме div, в който лежи p, и в него, завой, се намира участък. За div трябва да зададем цвета на шрифта червен, за p - жълт, за span -розово. В обичайната CSS това е направено, както следва: div {color: red; } div p {цвят: жълт; } div p span {цвят: розов; } С препроцесора на CSS всичко е по-лесно и по-компактно: div {color: red; p {цвят: жълт; .span {цвят: розов; }}} Елементите са буквално "вградени" един в друг.

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

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

Миксини

Една от най-интересните идеи. Позволява на един ред да зададе набор от свойства. Те работят по следния начин: @mixin bigFont {font-family: 'Times New Roman'; размер на шрифта: 64px; line-height: 80px; тегло на шрифта: удебелен; } За да приложите miksin към елемент на страницата, използвайте директивата @include. Например искаме да го приложим към заглавната част h1. Получава се следният дизайн: h1 {@include: largeFont;}

Всички свойства на mxin ще бъдат присвоени на h1.

Preprocessor Less

Синтаксис Sass напомня за програмирането. Ако търсите опция, която е най-подходяща за начинаещи CSS, обърнете внимание на Less. Тя е създадена през 2009 г. Основната характеристика - поддръжката на родния CSS синтаксис, така че те да не са запознати с програмирането на машинописите, ще бъде по-лесно да се овладее. Променливите се декларират чрез символа @. Например: @fontSize: 14px;. Привързаността работи на същите принципи като в Сас. Миксините са декларирани както следва: .largeFont (){font-family: 'Times New Roman'; размер на шрифта: 64px; line-height: 80px; font-weight: bold;}. За да се свържете, не е необходимо да използвате директиви на препроцесора - просто добавете новосформирания миксин в свойствата на избрания елемент. Например: h1 {.largeFont;}.

Stylus

Друг препроцесор. Създаден през 2011 г. от същия автор, който представи света с Jade, Express и други полезни продукти. Променливите могат да бъдат декларирани по два начина - изрично или косвено. Например: font = 'Times New Roman'; - това е неявен вариант. Но $ font = 'Times New Roman' е очевиден. Миксините се обявяват и свързват имплицитно. Синтаксисът е: redColor () цвят червен. Сега можем да добавим неговия елемент, например: h1 redColor ();. На пръв поглед стилусът може да изглежда неясен. Къде са родителските скоби и точка и запетая? Но си струва просто да се потопите в него, всичко става много по-ясно. Все пак, имайте предвид, че продължителното развитие с този препроцесор може да "обезсмисли", за да използвате класическия CSS синтаксис. Това понякога създава проблеми с необходимостта от работа с "чисти" стилове.

Какъв препроцесор трябва да избере?

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

ако сте програмист и искате да работите със стилове като код, използвайте Sass;

Ако сте уебмастър и искате да работите със стилове като обичайното оформление, обърнете внимание на Less;

Ако харесвате минимализма, използвайте Stylus.

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