Препроцессор SASS. Изучаем SASS для быстрой верстки. CSS компилятор для быстрой верстки шаблонов и макетов сайта.

Привет, посетитель сайта ZametkiNaPolyah.ru! Продолжим рубрику Верстка сайтов и ее раздел Препроцессор SASS и SCSS. В прошлой публикации мы познакомились с CSS препроцессором SASS и SCSS, в этой записи я предлагаю тебе инструкцию по применению, здесь ты найдешь информацию о том, как установить компилятор SASS на Windows 10, как можно скомпилировать код SASS или SCSS онлайн, а так же познакомишься с графическим компилятором SASS и SCSS для Windows, кстати, бесплатным.

Установка SASS на Windows. Компиляторы SASS, онлайн компиляция SASS

Так же мы поговорим про плюсы и минусы онлайн компиляторов SASS и компиляторов с графическим интерфейсом, написанных для Windows, поскольку иногда, в процессе их использования, вы можете столкнуться с не всегда понятными проблемами и неожиданными результатами работы компилятора.

Установка SASS на Windows. Добавить путь в переменную PATH в Winows 10

CSS препроцессор SASS является кроссплатформенным, но для его использования в операционных системах Windows, ровным счетом, как и в других ОС, необходима программная среда Ruby. Пользователям Mac OS и некоторых дистрибутивов Linux устанавливать Ruby не требуется, а вот обладателям компьютеров с Windows прежде, чем использовать SASS, необходимо установить Ruby. Давайте это и сделаем: установим Ruby на Windows, чтобы воспользоваться SASS компилятором.

Для этого перейдите на страницу: http://rubyinstaller.org/downloads/

Скачиваем Ruby, чтобы установить SASS компилятор на Windows

С данной страницы вам необходимо скачать инсталлер Ruby для Winows, соотвествующий разрядности вашей операционной системы. Запустите инсталлер и следуйте указаниям программы, я буду ставить по следующему пути: C:\Ruby.

А далее нам необходимо добавить путь к папке bin, которая находится в папке Ruby, в системную переменную PATH. У меня установлена Windows 10, поэтому пишу мануал для нее, когда я писал про установку SQLite на Windows, то там я рассматривал, как добавить переменную PATH для Windows 7.

Шаг 1: Кликните правой кнопкой мышки на «Мой компьютер» или «Этот компьютер» и выберете из появившегося меню вкладку «Свойства».

Прописываем путь к папке Ruby в переменную PATH на Windows 10

Шаг 2: В левом верхнем углу появившегося окна нажмите «Дополнительные параметры системы».

Прописываем путь к папке Ruby в переменную PATH на Windows 10, выбираем "Дополнительные параметры

Шаг 3: В появившемся окне нажмите кнопку «Переменные среды…».

Добавляем значение в переменную PATH в Windows 10, чтобы установить SASS компилятор, выбираем "Переменные среды

Шаг 4: В списке «Системные переменные» выберете переменную PATH и нажмите кнопку «Изменить», если у вас еще нет переменной PATH, нажмите кнопку «Создать».

Изменяем значение переменной PATH в Windows 10, чтобы указать путь к папке с Ruby

Шаг 5: В появившемся окне вы увидите все значения системной переменной PATH в Windows 10. В левом верхнем углу есть кнопка «Создать», воспользуйтесь ей.

Прописываем путь к папке с Ruby в переменной PATH на Windows 10

Шаг 6: В появившееся поле для редактирования я впишу C:\Ruby\bin. В вашем случае путь может отличаться, всё зависит от того, куда вы распаковали архив с Ruby.

Редактируем переменную PATH в Windows 10

Шаг 7: Подтверждаем новое значение системной переменной PATH, нажав кнопку ОК и возвращаемся к окну с системными переменными для того, чтобы создать новую системную переменную в Windows. Для этого нажмите кнопку «Создать», после чего появится окно, как на рисунке ниже. Имя новой системной переменной: RubyOpt, значение новой системной переменной: rubygems. Это нужно сделать для того, чтобы потом была возможность установить компилятор SASS и пользоваться им через терминал Ruby.

Создаем новую системную переменную в Windows 10, чтобы установить SASS компилятор

Шаг 8: Запускаем командную строку Windows. Для этого нажмите правой кнопкой мыши на значок, который раньше назывался «Пуск», после чего появится меню, в котором нужно выбрать пункт «Командная строка».

Запускаем командную строку, чтобы установить SASS компилятор на Windows 10

Шаг 9: В командной строке перейдите в каталог Ruby, в моем случае это команда: cd C:\Ruby. И установите компилятор SASS командой: gem install sass.

Выполняем команду для установки SASS компилятора на Windows 10

Шаг 10: В папке Ruby есть папка lib, создайте внутри папки lib папку с названием SASS. В папке SASS будут храниться файлы для компиляции в CSS.

На этом установка SASS в Windows завершена. Но давайте попробуем скомпилировать первый свой код SASS в CSS. Хотя в данном случае я приведу пример с использованием синтаксиса SCSS (если вы помните, SASS и SCSS отличаются только синтаксисом и ничем более), поскольку он больше похож на CSS.

Откройте любой удобный для вас редактор и напишите в нем следующий код:

[php]

h1{

color: #AF80ED;

}

p{

color: #DE5E85;

}

[/php]

Хотя этот код и не отличается от обычных CSS стилей (дабы не было трудностей с восприятием), мы сохраним его в папку c:\Ruby\lib\sass\ с расширением SCSS. Я назвал файл style.scss. А теперь давайте скомпилируем файл style.scss в файл style.css. Для этого воспользуйтесь командой sass --watch C:\ruby\lib\sass\style.scss:style.css.

Скомпилируем первый SASS файл в файл CSS при помощи установленного компилятора

Данная команда говорит компилятору SASS о том, что когда он заметит какие-либо сохраненные изменения в файле style.scss, он должен создать файл style.css. Скомпилированный файл style.css вы найдете в каталоге Ruby. Чтобы остановить работу компилятора SASS, воспользуйтесь сочетанием клавиш Ctrl + C.

Пример абстрактный и не демонстрирует преимуществ препроцессора SASS и SCSS перед обычным CSS, но он хорошо демонстрирует работу компилятора SASS. Иногда бывают ситуации, когда не очень удобно ставить Ruby и ставить компилятор SASS на Winows, поэтому некоторые разработчики нашли для себя выход в виде онлайн компиляторов SASS.

Онлайн компиляция SASS. Минусы онлайн компиляторов SASS

Скомпилировать код SASS в CSS онлайн намного проще, чем установить Ruby и затем установить компилятор SASS. Но у такого подхода есть несколько минусов:

1. Разработчики онлайн компиляторов SASS не всегда вовремя вносят изменения в компилятор, если обновляется версия SASS. Поэтому вам нужно внимательно следить за версиями SASS, которые вы пытаетесь скомилировать онлайн и сравнивать с тем, что может компилировать онлайн программа.
2. Второй минус онлайн компиляторов не касается проверенных и заслуживших доверие ресурсов, но всё же, иногда можно столкнуться с тем, что разработчик онлайн компилятора попытался изобрести велосипед, в следствии чего компиляция происходит не совсем корректно.
3. Используя онлайн компилятор SASS, вы не сможете использовать SASS файлы в своих проектах, которые уже запущены. Вам придется вручную копировать скомпилированный код и загружать его на сервер.

Плюсов у онлайн компиляции на мой взгляд два: первый плюс онлайн компиляции SASS заключается в том, что обычно онлайн компилятор представляет собой два окна (в одном окне вы пишите код на SASS или SCSS, во втором окне вы видите код CSS), что очень удобно для тех, кто только начал своё знакомство с SASS; второй плюс онлайн компиляторов SASS заключается в том, что не нужно устанавливать на свой компьютер сторонний софт.

В качестве примера онлайн компилятора SASS могу привести следующий сайт: http://www.sassmeister.com/. Этот онлайн компилятор SASS довольно простой: слева вы пишите код SASS и через небольшой промежуток времени в правом окне вы получаете код CSS. В левом верхнем углу собраны настройки, можно даже выбрать более старые версии SASS.

Компиляторы SASS для Windows

Если у вас есть необходимость компилировать SASS файлы, но нет желания ставить Ruby и устанавливать компилятор в Ruby, и есть периодические проблемы с доступом в интернет, то вам здесь помогут десктопные компиляторы SASS в Windows. Да и на самом деле, что бы там не говорили любители юникс-систем, но работать через командную строку не всегда удобно, выгодно и быстро, особенно фронт-энд разработчику. Обратите внимание: я не хочу вызвать последним предложением холивар, но считаю, что у каждой вещи есть свое применение и предназначение. Например, для меня никогда не станет ни один из дистрибутив Linux полноценной домашней операционной системой, а на работе мы не можем обойтись без Linux по многим причинам.

Компиляторов SASS для Windows очень много, но удобных очень мало, приведу один пример – компилятор Koala, который может компилировать не только код SASS, но и работать с препроцессором LESS и CoffeeScipt. Думаю, установить компилятор Koala вы сможете без проблем, но в скором времени на моем блоге появится небольшой обзор компилятора Koala.

Так же хочу заметить, что компиляторы SASS с графическим интерфейсом имеют тот же недостаток, что и компиляторы SASS онлайн: по сути, для нас компилятор SASS с графическим интерфейсом — это черный ящик и мы не знаем, как он реализован, а еще необходимо постоянно следить за обновлениями компилятора, чтобы не было проблем с новыми версиями SASS, если такие будут появляться, поэтому будьте внимательные и всегда читайте описание графических компиляторов SASS в Windows.