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

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

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

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

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

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

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

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

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

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

• Обединяване на префикси и браузъри на браузъра;
• опростяване на синтаксиса;
• Позволява да работи с вложени селектори без грешки;
• подобрява логиката на стилизирането.

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

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

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

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

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

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

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

гнездене

Преди това, за да означим гнездяването, трябваше да използваме дълги и неудобни конструкции. Представете си, че имаме чудо, в което се намира лъжата, а в него, от своя страна, е обхват. За div, трябва да зададем цвета на шрифта в червено, за p-жълто, за span-pink. В обикновения CSS това ще се направи така:

div {

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

}

div p {

цвят: жълт;

}

div p span {

цвят: розов;

}

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

div {

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

p {

цвят: жълт;

.span {

цвят: розов;

}

}

}

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

Директиви за преработвателния процес

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

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

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

@mixin largeFont {

шрифт семейство: lsquo-Times New Romanrsquo;

шрифт: 64px;

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

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

}

За да приложите миксин към елемент на страница, използвайте директивата @include. Например искаме да го приложим към заглавката h1. Получена е следната конструкция: h1 {@ include: largeFont-}

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

По-малко преработвател

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

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

стълбче

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

Променливите могат да бъдат декларирани по два начина - изрично или имплицитно. Например: font = lsquo-Times New Romanrsquo - е имплицитна опция. Но $ font = lsquo-Times New Romanrsquo-изрично. Смесините са обявени и свързани имплицитно. Синтаксисът е: redColor () цвят червен. Сега можем да го добавим към елемента, например: h1 redColor () -.

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

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

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

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

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