SASS и Netbeans

Настало время для очередной статьи. На днях я разбирался с препроцессорами CSS, вернее, почитал про SASS и LESS. От себя скажу, что про LESS я не дочитал. Единственное его преимущество нашел только в том, что для него не нужно сторонних языков, он отлично обрабатывается JavaScript, и да, у него хорошая документация. Но вот по удобству я предпочел SASS. С документацией по синтаксису SCSS у него, прямо скажем, беда. Есть какие-то основы, но они не раскрывают весь его потенциал.
Итак, SASS. Для его работы нужен Ruby. Для этого скачайте и установите RubyInstaller. В процессе установки он спросит, нужно ли создать переменную в переменных среды Windows - это лучше сделать, что бы потом не прописывать ее самостоятельно. После того, как Ruby установился запускаем Пуск -> Все программы -> Ruby(версия) -> Start Command Prompt with Ruby. Открылось окно с командной строкой для Ruby. В нем пишем:

gem install sass

Это запустит установку препроцессора SASS. После того, как он установится, в этом же окне с командной строкой пишем:

sass -v

Просто для того, что бы убедиться, что SASS установился.

Настройка Netbeans

Я настраивал версию 8.0, так что сложностей не возникло.
Итак, открываем Netbeans и создаем/открываем проект. На проекте щелкаем правой кнопкой мыши и выбираем пункт Свойства

В открывшемся окне в дереве слева выбираем пункт Препроцессоры CSS. Самое важное здесь - это таблица с именем Слежение. В ней все просто - нужно указать путь к папке, где лежат SCSS файлы и соответствующую папку, куда будут складываться уже скомпилированные CSS файлы. В заблуждение вводить только слово ПУТЬ. Почему? В начале я подумал, что путь должен быть полным и указал C:\WebServers\... и т.д. НО! Как я мог и догадаться сразу, здесь путь относительный - относительно проекта, соответственно, корнем следует считать проект. Что я и сделал.

Последняя часть - это настройка работы Netbeans и SASS. На самом деле, если Вы прописали путь Ruby в переменные среды при установке (или руками), тогда Netbeans сам все подцепит и ничего делать не придется.

Для тех, кто не любит галочки при установке

Если Вы поставили Ruby и не выставили никаких галочек, то и путь к нему в переменные среды не прописался. Это не беда, можно и руками сделать. Нажимаете правой кнопкой мыши на Мой компьютер и открываете Свойства. Слева выбираете пункт Дополнительные параметры системы. В открывшемся окне нажимайте кнопку Переменные среды. Снова откроется окно и в самом верху будет список переменных для пользователя. Найдите переменную Path (если нет, тогда создайте ее). Жмем Изменить. Если в ней уже что-то прописано, тогда в конце ставим точку с запятой (;) и пишем путь до папки bin Ruby (у меня это C:\Ruby200-x64\bin). Дальше везде жмем Ок.
Готово!

Итоги

Если все сделали верно, то Netbeans самостоятельно будет следить за папкой с SCSS файлами и компилировать их в CSS при сохранении.

Заключение

Если Вам понравилась статья или Вы нашли в ней что-то полезное, то кликните, пожалуйста, на баннер с рекламой.
Спасибо.