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

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

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

• Ръчно компилиране
• Автоматично компилиране
  • “Наблюдение” на индивидуален файл
  • “Наблюдение” на папка
• Най-важните команди, които трябва да запомниш
• Заключение

Най-общо погледнато, Sass файловете могат да се компилират по два начина – ръчно и автоматично.

В този урок ще ти покажа и двата метода. Командите са около 3, така че не би трябвало да имаш големи проблеми. Предварително искам да спомена, че фокуса ще бъде върху начините на компилиране, а не върху кода, който ще използвам. Кода тук е просто за пример. Естествено, можеш да го разгледаш и да пробваш да го развиеш, ако проявиш желание.

Да се захващаме.

Ръчно компилиране

При ръчното компилиране файловете се компилират “на ръка”. Това означава, че всеки път когато направиш промяна в Sass файла, трябва да го компилираш преди да видиш резултата в CSS/браузъра.

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

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

Стъпка 1

Създай нов файл. Запази го с разширение “.scss” (напр. style.scss) и постави в него следния код:

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

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

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

Стъпка 2

Отвори конзолата (Command Prompt) и навигирай до директорията, в която се намира новосъздадения Sass файл. В моя случай пътя е “c:/wamp/www/sass”.

Стъпка 3

След като “пристигнеш” в правилната папка въведи следната команда:

sass style.scss style.css

Това е минималното, от което се нуждаеш, за да компилираш един Sass файл.

В случая казваме на компилатора: “вземи style.scss, компилирай кода вътре в него и ни го върни като style.css”.

Стъпка 4

Сега виж папката, в която се намира Sass файла. Там, освен него, ще намериш и току що “изпеченият” css файл.

Ще забележиш и една нова папка – “.sass-cache”. Тя не трябва да те притеснява. Sass я създава автоматично и в нея кешира история на компилираните файлове. Компилатора я използва при всяко ре-компилиране с цел да забърза процеса. Това се усеща най-вече при големи колекции от Sass файлове.

Стъпка 5

Виж резултата в CSS файла. Ще намериш валиден и добре форматиран css код.

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

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

Това е всичко, което трябва да знаеш за ръчното компилиране. Не е чак толкова сложно нали? Един голям недостатък на този метод е, че можеш да компилираш само един файл на команда т.е., ако имаш три отделни файла, трябва да изпълниш командата три пъти.

Ето къде се вписва следващия метод.

Автоматично компилиране

Ръчното компилиране е отегчително. За щастие хората от Sass също мислят така. Точно затова ти предоставят много лесен начин за автоматизация на процеса. Мисля, че няма нужда да те убеждавам колко е по-удобно.

Автоматичното компилиране се дели на два вида:

• “Наблюдение” на индивидуален файл
• “Наблюдение” на папка

Идеята и при двата е следната: Sass “наблюдава” файла/папката за настъпване на промени. В случай, че засече такава, компилатора се задейства. Най-често това става след запазване/обновяване на файл.

Ето как работят тези два метода.

“Наблюдение” на индивидуален файл

Стъпка 1

Създай нов Sass файл и го запази (напр. “style-auto.scss”). Добави следния код:

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

.navigation {
  border-color: $blue;
}

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

Стъпка 2

Отвори Command Prompt, навигирай до папката, където се намира файла и използвай следната команда, за да инструктураш Sass да го “наблюдава” за (евентуални) промени:

sass --watch style-auto.scss:style-auto.css

Не забравяй да поставиш знака : между двата файла.

Веднага след като изпълниш командата, файла ще се компилира и ще видиш новосъздадения css файл. Sass пък ще ти върне следното приятелско съобщение: “Sass is watching for changes. Press Ctrl-C to stop.”.

Оттук насетне, всеки път когато запазиш файла, компилатора автоматично ще извърши необходимите действия. Не е ли страхотно? Пробвай го!

Стъпка 3

Ок, до тук всичко изглежда успешно.

За да спреш “наблюдението”, натисни “Ctrl+C”, въведи буквата “Y” и накрая натисни “Enter”.

Този метод е наистина удобен, ако работиш с един единствен файл. При повече от един обаче отново се създава неодобство. За щастие Sass ти предоставя още един метод, който е по-страхотен и от предишния. Това е “наблюдаване” цяла папка!

“Наблюдение” на папка

Главната идея зад този метод е, че можеш да “следиш” няколко файла наведнъж. Това е удобно, в случаите когато работиш върху няколко файла едновременно и не искаш сам да се занимаваш с тяхното компилиране.

В следващите няколко стъпки ще ти покажа как да се възползваш.

Стъпка 1

Създай две отделни папки. Едната може да се казва “sass”, където да държиш всички Sass файлове, а другата “css”, където ще се запазват компилираните CSS файлове.

Стъпка 2

Създай няколко Sass файла в папка “sass”. Кода не е от значение. Може да бъде еднакъв във всеки от тях.

Стъпка 3

Отвори отново конзолата (Command Prompt). Този път отиди до родителската директория т.е. тази, в която се намират папките “sass” и “css”.

Стъпка 4

Следващата команда ще каже на компилатора да “наблюдава” файловете в папка “sass” и да ги компилира, всеки път когато настъпи промяна в някой от тях. Компилираните файлове ще се запазят в папка “css”.

sass --watch sass:css

Не забравяй да поставиш знака : между двете папки.

Стъпка 5

След като изпълниш командата в конзолата ще видиш съобщение, което ти казва, че Sass “наблюдава” папката за промени.

Стъпка 6

А компилираните CSS файлове можеш да намериш в папка “css”.

Стъпка 7

Оттук насетне, всеки път когато направиш промяна в един от файловете, компилатора ще го обработи автоматично. За да прекратиш “наблюдението”, натисни “Ctrl+C”.

Най-важните команди, които трябва да запомниш

1. Ръчно компилиране

   sass style.scss style.css

   ..., където “style.scss” е името на Sass файла, който искаш да компилираш, а “style.css” е името на CSS файла, който ще получиш като резултат.

2. Автоматично компилиране
   • “Наблюдение” на индивидуален файл

     sass --watch style-auto.scss:style-auto.css

     ..., където “style-auto.scss” е името на Sass файла, който искаш да бъде “наблюдаван” за промени, а “style-auto.css” е името на CSS файла, който ще получиш като резултат.

   • “Наблюдение” на папка

     sass --watch sass:css

   ..., където “sass” е името на папката, която ще бъде “наблюдавана” за промени и в която се намират един или повече Sass файла, а “css” е името на папката, в която ще се запазят компилираните CSS файлове.

Заключение

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

В следващия урок ще научиш как да работиш с променливи.

Какво е мнението ти за Sass? Мислиш ли, че може да ти помогне и улесни?