Установка 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/Scss

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

Если вы уже знакомы с Sass/Scss, установили его и готовы начать пользоваться им, то вы можете прочитать вот эту запись — «Основы Sass/Scss». В ней я описываю все тонкости препроцессора, а так же как правильно пользоваться им.

Что такое Sass?

Sass — это разновидность препроцессора, который поможет вам во время разработки front-end части. Факт в том, что CSS файлы становятся все больше и больше и через некоторое время с ними становится сложнее работать.

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

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

Как установить Sass?

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

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

Тестируем

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

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

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

Применяем Sass в работе

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

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

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

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

Это будет означать, что Sass скомпилировал SCSS файл, создал из него два других. Первый это style.css и второй — style.css.map. И теперь вы можете зайти в папку где лежит style.scss и проверить наличие этих файлов и если вы откроете style.css, то вы должны увидите следующее:

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

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

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

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

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

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

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

Важные моменты

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

Совет 1

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

Совет 2

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

Install Sass

Applications

There are a good many applications that will get you up and running with Sass in a few minutes for Mac, Windows, and Linux. You can download most of the applications for free but a few of them are paid apps (and totally worth it).

• CodeKit (Paid) Mac
• Ghostlab (Paid) Mac Windows
• Hammer (Paid) Mac
• LiveReload (Paid, Open Source) Mac Windows
• Prepros (Paid) Mac Windows Linux
• Scout-App (Free, Open Source) Windows Linux Mac

Command Line

When you install Sass on the command line, you’ll be able to run the sass executable to compile .sass and .scss files to .css files. For example:

First install Sass using one of the options below, then run sass —version to be sure it installed correctly. If it did, this will include 1.32.10 . You can also run sass —help for more information about the command-line interface.

Once it’s all set up, go and play. If you’re brand new to Sass we’ve set up some resources to help you learn pretty darn quick.

Install Anywhere (Standalone) You can install Sass on Windows, Mac, or Linux by downloading the package for your operating system from GitHub and adding it to your PATH . That’s all—there are no external dependencies and nothing else you need to install. Install Anywhere (npm)

If you use Node.js, you can also install Sass using npm by running

However, please note that this will install the pure JavaScript implementation of Sass, which runs somewhat slower than the other options listed here. But it has the same interface, so it’ll be easy to swap in another implementation later if you need a bit more speed! Install on Windows (Chocolatey)

If you use the Chocolatey package manager for Windows, you can install Dart Sass by running

Install on Mac OS X or Linux (Homebrew)

If you use the Homebrew package manager for Mac OS X or Linux, you can install Dart Sass by running

Sass © 2006–2021 the Sass team, and numerous contributors. It is available for use and modification under the MIT License.

Следим и компилируем Sass, за пять быстрых шагов

Russian (Pусский) translation by Lexie Bykova (you can also view the original English article)

Sass — возможно самый популярный препроцессор CSS; годами он помогал нам писать чистый, многоразовый и модульный CSS. В этом кратком руководстве я расскажу о том, что важно, и объясните, как скомпилировать Sass в CSS, используя командную строку.

1. Установка Node.js

Чтобы скомпилировать Sass через командную строку, для начала нам нужно установить node.js. Загрузите его с официального сайта nodejs.org, распакуйте и следуйте помощнику.

2. Инициализация NPM

NPM — это менеджер пакетов для Node на языке JavaScript. NPM упрощает установку и удаление сторонних пакетов. Для инициализации проекта Sass с помощью NPM, откройте ваш терминал и перейдите в каталог вашего проекта, используя команду CD (смените каталог).

Переход к папке проекта Sass

Как только вы добрались до нужной папки, выполните команду npm init . Вас попросят ответить на несколько вопросов о вашем проекте, после чего NPM сгенерирует файл package.json в вашей папке.

3. Установка Node-Sass

Node-sass это пакет NPM, который компилирует Sass в CSS (и делает это очень быстро). Для установки node-sass выполните в терминале следующую команду: npm install node-sass

4. Пишем команду Node-sass

Всё готово для написания маленького скрипта для компилирования Sass. Откройте файл package.json в вашем редакторе кода. Вы увидите что-то вроде этого:

В разделе scripts добавьте scss команду, в свойстве test, как показано ниже:

Давайте рассмотрим эту строку по словам.

1. node-sass : Ссылается на пакет node-sass.
2. -watch: Дополнительный флаг, который означает “следить за всеми .scss файлами в папке scss/ и перекомпилировать их каждый раз когда они изменяются.”
3. scss : Название папки, куда мы положим все наши .scss файлы.
4. -o css : Папка куда выдаются скомпилированные CSS.

При запуске этого скрипта, он будет следить за каждым .scss файлом в папке scss/ , затем сохранять скомпилированный css в папке css/ , каждый раз, когда мы изменяем .scss файл.

5. Запускаем скрипт

Для выполнения нашего одностраничного скрипта, нам нужно запустить в терминале следующую команду: npm run scss

И вуаля! Мы следим и компилируем SASS.

Быстрый совет Sass

Оставайтесь на связи, чтобы получить больше быстрых советов Sass.

Установка 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 файлы компилируются, локальный сервер настроен, при ошибках наш сборщик показывает номера строк с ошибками, но у вас наверно возник вопрос. А как все это работает?