Установка SASS

В официальной документации содержатся разные инструменты и предложения по компиляции SASS файлов (мы будем рассматривать SCSS синтаксис). При этом какой инструмент предпочтительнее и четкой последовательности действий вы там к сожалению не найдете. Сейчас в мире веб-разработки наибольшее количество разрабочиков собирают свои проекты при помощи node.js и gulp. Почему так происходит?

Специальные приложения (prepros, koala, codeKit) можно использовать если вы начинающий разработчик, но как правило в приличных компаниях разработка осуществляется на сервере компании. Работать с ним вы будете через командную строку, и данные программы вы там физически запустить не сможете.

Если вы попробуете компилировать SASS файлы при помощи «ruby on rails», то столкнетесь с проблемами, если путь к компилируемым файлам содержит русские буквы. Ко всему прочему этот способ мягко говоря медленный. Как правило при верстки собираются не только стили, но и javaScript-файлы. На данный момент времени лучшего способа собрать JS чем «webpack» просто не существует. По нормальному связать «webpack» и «ruby on rails» у вас не получится.

Перед началом установки, я рекомендую вам установить какой-нибудь файловый менеджер. Я использую double commander. Могу сказать, что он бесплатный, кроссплатформенный, существует его портативная версия. С ним работать будет проще, но можно его и не устанавливать.

Итак, приступим к установки.

1. 1. Для начала идем на официальный сайт node.js (Рис. 1) и скачиваем его дистрибутив. Качаем его LTS-версию, иначе некоторые плагины могут не запуститься. После того, как мы его уснановили, стоит проверить работает ли он. Для этого жмем «Win+r» (если у вас windows), в появившемся окне набираем «node» (Рис. 2), и жмем «Enter». Если все прошло успешно, то должно появиться вот такое окно (Рис. 3). Если вы начинающий разработчик, то можете использовать его как калькулятор, хотя node.js это полноценный сервер, не хуже чем «apache». Если же он не появился, то скорее всего у вас какие-то проблемы с правами. В операционных системах Windows Vista и Windows 7-8 нужно запускать инсталятор с правами администратора.
2. 2. Дальше идем на мою страничку github и качаем мой пример, если вы не умеете пользоваться git-ом, то вы можете скачать его ZIP-архив (Рис. 4). После того как вы скачали данный пример, его нужно где-нибудь распоковать. Поскольку пример учебный, я его распакую на диске «C:\» (Рис. 5). Вам я советую сделать так-же, в последующем имеет смысл создать папку для проектов, к примеру «projects» и все ваши проекты класть туда.
3. 3.

Теперь поставим сборщик проектов gulp, и некоторые плагины к нему. Я рекомендую вам посмотрить документацию по gulp.

Из документации следует, что сперва нам нужно установить «gulp-cli», а затем и сам «gulp». В моем примере нужно будет установить только «gulp-cli», сам сборщик проектов gulp, и все плагины для него установятся автоматически. Запустите «double commander» и перейдите в корень нашего проекта (в распакованный ранее архив из 2 пункта выше). Когда вы в него перейдете, то запустите в данном проекте терминал. Сделать это можно щелкнув на соответствующую иконку, она вторая слева (Рис. 6). Если вы не устанавливали «double commander», то запустите консоль и перейдите в наш проект. С «double commander» работать с консолью будет значительно проще (будет проще запускть консоль в нужном месте).

Дальше в консоли следует набрать «npm install —global gulp-cli», начнется процесс установки. Все будет зависеть от скорости интернета, но в среднем установка занимает не более 5 минут. После того как вы установите «gulp-cli» наберите в консоли команду «npm install», у вас запустится установка (Рис. 7). После установки вы должны увидеть что-то вроде этого (Рис. 8). В проекте появится папка «node_modules», в ней лежат плагины которые будут компилировать наши SASS файлы.

Могу вас поздравить установка завершена. Давайте проверим, что у нас получилось.

1. 1. Перейдите в наш проект, запустите в нем консоль, и введите в консоли команду «gulp». У вас должно появиться вот такое вот окошечко (Рис. 9). Это окошко говорит о том, что у нас запустился локальный сервер по адресу «http://localhost:8080/» и скомпилировались наши стили.
2. 2. В нашем проекте есть папка «scss», в ней лежит файл «main.scss». Он называется «сборочным-файлом» (еще я где-то читал он называется файлом-акселератором). В нем осуществляется подключение всех необходимых файлов. На выходе мы получим файл «main.css», который будет выводиться по следующему пути «public/css/main.css», так-же мы будем компилировать его сжатую версию по адресу «public/css/min/main.css». Наша сборка автоматически будет подставлять в выходном CSS «автопрефиксы», и будет группировать медиазапросы. То, что у нас отобразится в браузере будет лежать в папке «public». Я сделал простенький пример.
3. 3. Итак перейдите по адресу http://localhost:8080/.
4. 4. Откройте файл «_example.scss» из папки «scss» в каком-нибудь редакторе. Я советую вам пользоваться Visual Studio Code, sublime text, или atom. Тут как говорится выбирайте сами.
5. 5. В данном файле у нас находится четыре переменных $mainFontSize , $mainBg , $padding , $margin . Переменная $mainFontSize служит для задания размера шрифта нашего документа. Переменная $mainBg служит для задания фона документа. Переменная $padding служит для задания внутренних отступов слева, и справа нашего документа. Переменная $margin служит для задания внешних отступов у абзацев нашей страницы. Впринципе это нужно нам для примера, поэтому усложнять не имеет смысла, суть будет ясна. Давайте попробуем поменять наши переменные.
6. 6. Замените переменную $mainFontSize на 20px . Посмотрите как увеличился текст на странице, вместе с ним должны увеличиться и все отступы (Рис. 10).
7. 7. Для #wrapper замените параметр #darken($mainBg, 30%) на #darken($mainBg, 80%) . Посмотрите как изменится текст документа (Рис. 11). Все изменения происходят в режиме реального времени. Нам не нужно перезагружать браузер. Впринципе компилятор мы настроили, дальше экспериментируйте с переменными сами.
8. 8. А теперь давайте попробуем сломать наш проект. В файле » _example.scss » замените переменную $margin на $margins , мы должны увидеть следующее окошко Рис. 12. Оно нам говорит, что в строке 25 объявлена не используемая переменная. Очень важно уметь читать данные ошибки. Впринципе все, дальше попробуйте сами поменять переменные. Поломайте проект. Посмотрите, что будет.
9. 9. Для того, чтобы прекратить сборку, щелкните мышкой на консоль, и нажмите «Ctrl»+»C». Дальше введите «Y».

Принцип работы

Вроде бы все у нас получилось, устанока прошла успешно, SASS файлы компилируются, локальный сервер настроен, при ошибках наш сборщик показывает номера строк с ошибками, но у вас наверно возник вопрос. А как все это работает?

Установка

Использовать SASS можно во многих случаях. Это может быть:

• онлайн-окружение, которое автоматически переводит код из SASS в CSS,
• пакет в вашей системе (как например surge из первого проекта),
• отдельное программное обеспечение, переводящее файлы из .sass/.scss в .css.

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

Онлайн-окружение

Для использования SASS в онлайн-окружении подойдёт почти любой известный вам онлайн-редактор кода. Например, CodePen. Во вкладке с CSS выберите использование препроцессора SASS. Для синтаксиса SCSS необходимо выбрать соответствующий пункт выпадающего меню.

Это самый простой и быстрый вариант, который позволит вам писать CSS-код с использованием препроцессора SASS.

Другим популярным инструментом является сервис Sassmeister. Он позволяет быстро переводить код SASS в обычный CSS. Преимуществом данного сервиса является возможность выбора разных типов компиляторов. Это позволяет проверить свой код в разных условиях и, возможно, выявить несколько ошибок, с которыми можно столкнуться.

Программное обеспечение

Вы можете установить отдельное ПО, которое будет компилировать файлы препроцессора в обычный CSS. Таких программ достаточно много, и многие из них доступны под все основные платформы (Windows, Linux, macOS). Распространённой программой является Koala. Она доступна под все основные платформы, а её интуитивный интерфейс позволит быстро разобраться в процессе компиляции файлов препроцессора.

Просто выберете директорию с вашими файлами .scss, и Koala автоматически преобразует их в файлы .css.

Установка SASS в виде пакета

Вы можете установить SCSS в виде обычного npm-пакета в вашу систему. Это наиболее простой и быстрый путь, позволяющий вам использовать SASS без установки дополнительного программного обеспечения и не требует выхода в интернет, как в случае с онлайн-сервисами.

Для установки SASS убедитесь, что у вас установлен Node.js. Откройте терминал и выполните следующую команду:

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

Установка Sass

Приложения

Есть множество приложений под Windows, Mac и Linux, которые помогут в освоении и работе с Sass. Большинство из них бесплатные, но некоторые из них все-таки платные (но это того стоит).

• CodeKit (Платно) Mac
• Compass.app (Условно-бесплатно) Mac Windows Linux
• Ghostlab (Платно) Mac Windows
• Hammer (Платно) Mac
• Koala (Бесплатно) Mac Windows Linux
• LiveReload (Условно-бесплатно) Mac Windows
• Prepros (Платно) Mac Windows Linux
• Scout-App (Бесплатно) Windows Linux Mac

Командная строка

Когда вы используете Sass через командную строку, то для того, чтобы запустить компиляцию .sass и .scss в .css файлы введите команду sass . Например:

Используя любой способ установки Sass, запустите команду sass —version чтобы быть уверенным, что установка прошла успешно. Если эту команду выполнить, то в ответ вы получите версию Sass 1.5.1 . Также вы можете запустить команду sass —help для получения информации по использованию Sass в командной строке.

Как только все настроено, начинайте наслаждаться. Если вы впервые столкнулись с Sass, то специально для вас мы создали несколько ресурсов для обучения.

Установка в любом месте (Standalone) Вы можете установить Sass в Windows, Mac, или Linux путем скачивания дистрибутива для вашей операционной системы from GitHub и выполните действия с PATH . Вот и все: никаких зависимостей нет и ничего не нужно устанавливать дополнительно. Установка в любом месте (npm)

Если вы используете Node.js, то вы можете установить Sass c помощью npm:

Однако, учтите, что это установит реализацию Sass на нативном JavaScript, которая работает несколько медленнее, чем другие реализации, перечисленные здесь. Но он имеет тот же интерфейс, поэтому будет легче поменять на другую реализацию позже, если вам потребуется немного больше скорости! Установка в Windows (Chocolatey)

Если вы используете менеджер пакетов Chocolatey для Windows, вы можете установить Dart Sass при помощи команды:

Установка в Mac OS X (Homebrew)

Если вы используете менеджер пакетов Homebrew для Mac OS X, вы можете установить Dart Sass при помощи команды:

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

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

Привет, посетитель сайта 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.

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

Хотя этот код и не отличается от обычных 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.