Как установить sass на windows

Обновлено: 07.07.2024

На сегодняшний день, разработчики имеют огромный список инструментов-помощников. Одним из них является Sass. В этой записи я подробно распишу что это такое, для чего его используют и как вам лично начать им пользоваться.

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

Например, чтобы не прописывать одно и тоже свойство несколько раз, можно создать один элемент и далее уже подключать этот элемент к другим классам, а так же много другое. Это лишь маленькая часть того, что можно делать.

Чтобы начать использовать Sass вам нужно скачать и установить Ruby с официального сайта, прописать одну команду в консоль (чтобы установить Sass) и все готово. Ниже весь процесс расписан поэтапно.

Устанавливаем Ruby. Заходим на официальный сайт в раздел загрузки, выбираем билд (версию) Windows и скачиваем. Например, я использую Windows 7 (64 битовую), поэтому я буду скачивать Ruby 2.2.4 (x64).
Следуйте всем указаниям установщика.
После успешной установки Ruby откройте Windows консоль и пропишите gem install sass и после этого запустится процесс установки Sass. Если во время установки у вас выдает ошибку, то попробуйте поменять gem на sudo и в итоге у вас должна получиться вот такая строка sudo gem install sass .

После того как вы установили Sass, вам нужно убедиться, что вы сделали все правильно. Сделать это можно в два простых этапа.

Откройте командную строку Windows
Пропишите туда sass -v . Если вы все правильно установили, то у вас должно появиться что-то вроде такой строки Sass 3.4.19 (Selective Steve) .

PS. Если у вас ничего не выводиться, возможно вы не находитесь в правильной директории. Для начала вам нужно прописать cd и дальше путь до того места куда вы установили Ruby. В моем случае это будет вот так cd D:\Programs\Ruby22\bin\ . После того как вы попадете в эту директиву, вам нужно прописать sass -v . Если у вас все равно ничего не показывает, то повторите процесс установки с самого начала и после чего вернитесь снова сюда.

Для начала давайте создадим простой файл, который будет называться style.scss и внутри мы напишем следующее:

Обратите внимание, что формат файла .scss, а не .css. Для .scss используется немного другой синтаксис, но он элементарный и вполне понятный с самого начала (если вы раньше когда-либо использовали css). А если вы читаете эту статья, я ожидаю, что вы уже знакомы с ним.

И так продолжим с style.css:

Откройте Windows консоль, с помощью cd команды вам нужно переместиться в папку с Ruby, которая называется bin , (выше я уже описывал как это можно сделать)
Внутри консоли пропишите sass --watch и далее перетащите файл style.scss в консоль и она автоматически вставить путь до style.scss файла и уже после нажмите Enter.
В итоге должно получиться примерно так же как показано на скриншоте выше.

PS. Конечно же у вас папки и путь могут различаться.
После ввода команды из второго этапа, на экрана у вас должно появиться что-то похожее на это:

Как вы можете заметить, Sass взял все содержимое файла style.scss и сделал из него обычный CSS файл.

Так же обратите внимание, что в scss, все стили пишутся в древовидном виде (то есть класс внутри класса).

Конечно же SCSS намного удобнее.

Вот некоторые из плюсов SCSS:

Группирование стилей
Возможность быстро найти нужный класс/id
Использование одних и тех же стилей в нескольких местах

Вы намерное спросите, а что такое --watch ? Данная команда принуждает Sass следит за каждым изменением style.scss. То есть каждый раз, когда вы будите сохранять новую копию этого файла, Sass обратит на это внимание и скомпилирует свежую версию CSS.

PS. Если у вас уже имеется скомпилированая версия CSS в той же папке где и style.scss, то он их перезапишет на более новую.

В этом разделе, я хочу дать несколько советов, которые вам могут пригодиться.

Совет 1

Для того, чтобы создать CSS файл, изначально нужно создать SCSS файл в котором указывать стили для компиляции CSS.

Совет 2

Если во время компиляции у вас возникает ошибка, скорее всего вы ошиблись в синтаксисе Sass. Внимательно проверьте файл и попробуйте скомпилируйте заново.

Существует множество приложений, которые позволят вам за несколько минут начать работу с Sass для Mac, Windows и Linux. Вы можете скачать большинство приложений бесплатно, но некоторые из них являются платными (и они того стоят).

CodeKit (Платно) Mac
Ghostlab (Платно) Mac Windows
Hammer (Платно) Mac
LiveReload (Платно, Open Source) Mac Windows
Prepros (Платно) Mac Windows Linux
Scout-App (Бесплатно, С открытым исходным кодом) Windows Linux Mac

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

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

Сначала установите Sass, используя один из вариантов ниже, затем запустите sass --version , чтобы убедиться, что он установлен правильно. Если это так, это будет включать 1.38.2 . Вы также можете запустить sass --help для получения дополнительной информации об интерфейсе командной строки.

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

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

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

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

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

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

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

Установка 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 компилятором.

Скачиваем 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. Но у такого подхода есть несколько минусов:

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

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

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

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

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

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

Мне понадобилось установить SCSS на мой рабочий компьютер с Windows 10, но хотелось сделать это по проще, без установки Ruby или Node.js, как быть? Поискав в интернете понял, что самое простое решение это установить Dart Sass.

Скачиваем нужную версию Dart Sass

Далее разархивируем файлы, например на диск C:, получается путь C:\dart-sass

Теперь можно протестировать, откройте командную строку и введите:

Если мы увидели номер версии, то значит все работает.

Настраиваем SCSS (SASS) в PhpStorm или WebStorm

В открывшимся окне в поле Program кликаем по иконке папки и выбираем наш C:\dart-sass\sass.bat и сохраняем.

Теперь мы можем работать с SCSS (SASS) в PhpStorm или WebStorm.

По умолчанию скомпилированные файлы сохраняются в той же папке где лежат SCSS (SASS) файлы.

Читайте также: