Уеб уроци и ресурси по HTML,
CSS, CSS3, JavaScript и други

През последните няколко години използването на CSS препроцесори доби висока популярност. Това не е нещо необичайно тъй като адекватното им използване значително може да забърза процеса на създаване на един сайт. Дали ще ти бъде полезен или не, зависи най-вече от това колко време си готов/-а да отделиш, за да го усвоиш наистина добре. Усилията обаче си заслужават.

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

[Последно обновен на 27 юли 2015 г.]

Съдържание на урока

• Какво представляват CSS препроцесорите?
  • Какви са ползите?
  • Видове препроцесори
• Sass
  • Защо Sass?
  • Кратка история на Sass
  • Синтаксис
    • SCSS (Sassy CSS)
    • The indented syntax
• Инсталиране
  • Инсталиране на Ruby
  • Инсталиране на Sass
• Заключение

Забележка: Правилното разбиране на CSS, базирано върху солидна основа от знание, е задължително преди да започнеш да се занимаваш с препроцесори. Препроцесорите са “следващо ниво”, подобрение, израстване в работата със CSS, а не заместител. Т.е. казано в едно изречение, ако си напълно начинаещ в CSS, то в такъв случай по-добре разгледай уроците по CSS.

Какво представляват CSS препроцесорите?

Препроцесорите се използват на ниво “разработване”. Те ти помагат да пишеш код, който по-късно се компилира в CSS.

Визуално представена, ролята на препроцесора изглежда така:

Какви са ползите?

Препроцесора ти позволява да правиш неща като:

• запазване на стойности в променливи, които могат да бъдат преизползвани
• вместване на CSS декларации (nested blocks)
• разделяне на кода в отделни “модули” (файлове) за по-добра ораганизация
• създаване на миксини (mixins), което ти позволяват да преизползваш многократно определен блок от код
• предпазване от излишно повтаряне на един и същ код

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

Видове препроцесори

В настоящия момент най-известните препроцесори са:

• Sass
• Less
• Stylus
• CSS-Crush
• Myth

Честно да си призная не съм използвал повечето от тях. Моят опит е свързан най-вече със Sass. В тази серия от уроци ще се фокусирам върху него.

Sass

Защо Sass?

Краткият отговор е “Лично предпочитание”.

За по-дълъг, прочети следващата история. :)

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

Направих кратко проучване из Интернет. Прочетох няколко статии по темата. Най-убедителна беше Sass vs. Less на Chris Coyier. Накрая просто реших да избера Sass и да работя с него.

Сигурно има достатъчно добри причини човек да избере Less, Stylus или някой от другите препроцесори, но според мен не трябва да се вманиячаваме и да премисляме избора си прекалено много. Избирах Sass, просто защото ми се стори най-лесен за научаване. В края на деня обаче, това си остава просто още един инструмент, който или ще ме улесни да свърша работата си по-ефективно или не.

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

Ще се радвам да споделя с теб наученото. Надявам се ти също да имаш полза.

Кратка история на Sass

Няма да ти губя времето, затова ще бъда наистина кратък.

Въпреки голямата популярност на CSS препроцесорите в последните няколко години, те съвсем не са нещо ново. Всъщност, Sass е създаден от Hampton Catlin през далечната 2007 г. Той и Natalie Weizenbaum довеждат Sass до версия 2. По-късно, Natalie поема изцяло проекта, както и работата по него. Не след дълго към нея се присъединява Chris Eppstein (края на 2008 г.), с който развиват проекта от версия 2.2 нататък.

Синтаксис

Sass поддържа два синтаксиса.

SCSS (Sassy CSS)

Този е може би най-широко използвания начин за писане на Sass, защото е подобен на синктасиса на CSS. Това означава, че всеки валиден CSS код е валиден SCSS. Файловото разширение на файловете написани на SCSS е .scss.

Пример:

$blue: #3bbfce;
$margin: 16px;

.navigation {
  border-color: $blue;
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

The indented syntax

Втория синтаксис е познат като “The indented syntax”. Особеното тук е, че не се използват символите ; и { } за дефиниране на блокове и декларации, а се набляга на бялото пространство (white space) за правилно формиране на кода. Файловото разширение на тези файлове е .sass.

Пример:

$blue: #3bbfce
$margin: 16px

.navigation
  border-color: $blue

.border
  padding: $margin / 2
  margin: $margin / 2
  border-color: $blue

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

Аз лично предпочитам втория – “The indented syntax”, защото се пишат по-малко символи, което спестява време и фокуса е изцяло върху кода.

Забележка: Понякога се случва дадена SassScript функция да не работи в определен синтаксис (най-често това е “The indented syntax”). В този случай просто трябва да използваш другия. На този етап обаче това не трябва да те притеснява.

Кода и от двата примера по-горе ще се компилира до следния CSS:

.navigation {
  border-color: #3bbfce;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

Инсталиране

Време е да преминем към действие.

Тук искам да поставя няколко условия:

1. Операционната система, която използвам е Windows 7 т.е. стъпките, които ще опиша по-долу, са базирани на Windows.
2. За изпълнението на различните команди ще използвам любимата конзола (Command Prompt). Съвсем наясно съм, че съществуват доста апликации, които автоматизират голяма част от процеса. Въпреки това аз ще се придържам към конзолата (Command Prompt), тъй като я има инсталирана в самия Windows, а и командите не са чак толкова сложни. Добрата новина е, че командите са едни и същи независимо от операционната система.

Тази мистериозна конзола (или “Command Prompt”) се намира в “Start -> Programms -> Accessories -> Command Prompt”. Друг начин за стартиране е като задържиш “Windows Button + R”. Ще се покаже прозорец, в който трябва да напишеш “cmd” и да натиснеш Enter.

Прозореца на конзолата изглежда така:

Да започваме.

Инсталиране на Ruby

Тъй като Sass е базиран на Ruby, първото нещо с което трябва да е сдобиеш е Ruby. Ако вече го имаш инсталиран - супер!, можеш да преминеш към следващата точка.

Стъпка 1

Влез в RubyInstaller и свали версия 2.1.6 на Ruby.

Забележка: В сайта на RubyInstaller препоръчват версия 2.1.X на хората, които не са напълно сигурни коя от всички версии да инсталират. Ако нямаш опит с Ruby, аз също те съветвам да използваш 2.1.6.

Стъпка 2

При инсталацията не забравяй да отметнеш “Add Ruby executables to your PATH”.

Стъпка 3

След като инсталацията приключи можеш да провериш дали всичко е минало успешно като отвориш конзолата и напишеш:

ruby -v

Това ще покаже настоящата версия на Ruby.

Инсталиране на Sass

Отново в конзолата въведи следното:

gem install sass

Тази команда ще свали и инсталира най-новата версия на Sass. Към настоящия момент тя е 3.4.16. Изчакай търпеливо докато всичко приключи. Не би трябвало да отнеме много време.

Можеш да направиш бърза проверка дали инсталацията е била успешна като “принтираш” настоящата версия:

sass -v

Честито! Добре дошъл/-ла на борда. Вече разполагаш със Sass, но не бързай да го слагаш в листа си с компетенции. Все още не си работил/-а с него :)

В следващия урок ще създадеш своя пръв Sass файл и ще научиш как да го компилираш. Истинската работа със Sass тепърва предстои.

Заключение

Живеем във време, в което да бъдеш уеб разработчик/дизайнер е нещо наистина вълнуващо. Инструментите, които имаме на разположение, са страшно много и всеки от тях ни помага да вършим работата си по-добре. Използването на препроцесор е бърз и удобен начин за улесняване на творческия ни процес. Няма причина да не използваш препроцесор. Той ти дава по-гъвкав и организиран начин за писане на CSS. Може би в бъдеще дори в самия CSS стандарт ще има вградени някои от чертите на Sass.

Надявам се, че урока успя да събуди любопитството в теб и си развълнуван/-а да научиш повече за Sass. Всяко следващо упражнение, което изпълниш, е възможност да подобриш уменията си.

Мислиш ли, че използването на препроцесор ще те улесни? Готов/-а ли си да го използваш в своето ежедневие? Сподели мнението си в коментарите по-долу.