Установка SASS
В официальной документации содержатся разные инструменты и предложения по компиляции SASS файлов (мы будем рассматривать SCSS синтаксис). При этом какой инструмент предпочтительнее и четкой последовательности действий вы там к сожалению не найдете. Сейчас в мире веб-разработки наибольшее количество разрабочиков собирают свои проекты при помощи node.js и gulp. Почему так происходит?
Специальные приложения (prepros, koala, codeKit) можно использовать если вы начинающий разработчик, но как правило в приличных компаниях разработка осуществляется на сервере компании. Работать с ним вы будете через командную строку, и данные программы вы там физически запустить не сможете.
Если вы попробуете компилировать SASS файлы при помощи «ruby on rails», то столкнетесь с проблемами, если путь к компилируемым файлам содержит русские буквы. Ко всему прочему этот способ мягко говоря медленный. Как правило при верстки собираются не только стили, но и javaScript-файлы. На данный момент времени лучшего способа собрать JS чем «webpack» просто не существует. По нормальному связать «webpack» и «ruby on rails» у вас не получится.
Перед началом установки, я рекомендую вам установить какой-нибудь файловый менеджер. Я использую double commander. Могу сказать, что он бесплатный, кроссплатформенный, существует его портативная версия. С ним работать будет проще, но можно его и не устанавливать.
Итак, приступим к установки.
- 1. Для начала идем на официальный сайт node.js (Рис. 1) и скачиваем его дистрибутив. Качаем его LTS-версию, иначе некоторые плагины могут не запуститься. После того, как мы его уснановили, стоит проверить работает ли он. Для этого жмем «Win+r» (если у вас windows), в появившемся окне набираем «node» (Рис. 2), и жмем «Enter». Если все прошло успешно, то должно появиться вот такое окно (Рис. 3). Если вы начинающий разработчик, то можете использовать его как калькулятор, хотя node.js это полноценный сервер, не хуже чем «apache». Если же он не появился, то скорее всего у вас какие-то проблемы с правами. В операционных системах Windows Vista и Windows 7-8 нужно запускать инсталятор с правами администратора.
- 2. Дальше идем на мою страничку github и качаем мой пример, если вы не умеете пользоваться git-ом, то вы можете скачать его ZIP-архив (Рис. 4). После того как вы скачали данный пример, его нужно где-нибудь распоковать. Поскольку пример учебный, я его распакую на диске «C:\» (Рис. 5). Вам я советую сделать так-же, в последующем имеет смысл создать папку для проектов, к примеру «projects» и все ваши проекты класть туда.
- 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. Перейдите в наш проект, запустите в нем консоль, и введите в консоли команду «gulp». У вас должно появиться вот такое вот окошечко (Рис. 9). Это окошко говорит о том, что у нас запустился локальный сервер по адресу «http://localhost:8080/» и скомпилировались наши стили.
- 2. В нашем проекте есть папка «scss», в ней лежит файл «main.scss». Он называется «сборочным-файлом» (еще я где-то читал он называется файлом-акселератором). В нем осуществляется подключение всех необходимых файлов. На выходе мы получим файл «main.css», который будет выводиться по следующему пути «public/css/main.css», так-же мы будем компилировать его сжатую версию по адресу «public/css/min/main.css». Наша сборка автоматически будет подставлять в выходном CSS «автопрефиксы», и будет группировать медиазапросы. То, что у нас отобразится в браузере будет лежать в папке «public». Я сделал простенький пример.
- 3. Итак перейдите по адресу http://localhost:8080/.
- 4. Откройте файл «_example.scss» из папки «scss» в каком-нибудь редакторе. Я советую вам пользоваться Visual Studio Code, sublime text, или atom. Тут как говорится выбирайте сами.
- 5. В данном файле у нас находится четыре переменных $mainFontSize , $mainBg , $padding , $margin . Переменная $mainFontSize служит для задания размера шрифта нашего документа. Переменная $mainBg служит для задания фона документа. Переменная $padding служит для задания внутренних отступов слева, и справа нашего документа. Переменная $margin служит для задания внешних отступов у абзацев нашей страницы. Впринципе это нужно нам для примера, поэтому усложнять не имеет смысла, суть будет ясна. Давайте попробуем поменять наши переменные.
- 6. Замените переменную $mainFontSize на 20px . Посмотрите как увеличился текст на странице, вместе с ним должны увеличиться и все отступы (Рис. 10).
- 7. Для #wrapper замените параметр #darken($mainBg, 30%) на #darken($mainBg, 80%) . Посмотрите как изменится текст документа (Рис. 11). Все изменения происходят в режиме реального времени. Нам не нужно перезагружать браузер. Впринципе компилятор мы настроили, дальше экспериментируйте с переменными сами.
- 8. А теперь давайте попробуем сломать наш проект. В файле » _example.scss » замените переменную $margin на $margins , мы должны увидеть следующее окошко Рис. 12. Оно нам говорит, что в строке 25 объявлена не используемая переменная. Очень важно уметь читать данные ошибки. Впринципе все, дальше попробуйте сами поменять переменные. Поломайте проект. Посмотрите, что будет.
- 9. Для того, чтобы прекратить сборку, щелкните мышкой на консоль, и нажмите «Ctrl»+»C». Дальше введите «Y».
Принцип работы
Вроде бы все у нас получилось, устанока прошла успешно, SASS файлы компилируются, локальный сервер настроен, при ошибках наш сборщик показывает номера строк с ошибками, но у вас наверно возник вопрос. А как все это работает?
Установка sass через path
В этой статье я вам расскажу как установить sass через переменную окружения path, в Windows и linux.
Установка в Windows:
1. Сначала скачиваем sass виде архива с gitHub , зависимо от типа системы.
Если 32 битная — dart-sass-1.x.x-windows-ia32.zip.
Если 64 битная — dart-sass-1.x.x-windows-x64.zip.
После этого разархивируем в нужную папку.
2. Следующий шаг зависит от вашей версии Windows.
Если у вас Windows 8 , 10 , то заходим в панель управления и нажимаем на ссылку » система «.
Если Windows 7 то заходим в компьютер потом нажимаем на » Свойство системы «.
3. Теперь заходим в » Дополнительные параметры системы «.
4. Нажимаем на » Переменные среды. «.
5. В верхней таблице выберем path и нажимаем » Изменить «.
6. После этого нажимаем » Создать «, прописываем путь до вашей папки sass и нажимаем » ОК «.
7. Перезагружаем компьютер.
8. Что бы проверить установилось ли, прописываем в командной строке команду » sass —version «.
Установка в Linux:
Я буду показывать в Ubuntu 18.04.
1. Точно также как в Windows зависимо от системы, скачиваем с gitHub архив.
Если 32 битная — dart-sass-1.x.x-linux-ia32.tar.gz.
Если 64 битная — dart-sass-1.x.x-linux-x64.tar.gz.
После этого разархивируем в нужную папку.
2. Теперь в » домашней папке » открываем файл » .bashrc «.
3. Прописываем в самом конце файла команду ‘ export PATH=»Ваша-папка-с-sass:$PATH» ‘.
4. Cохраняем » .bashrc » и перезапускаем систему.
5. Что бы проверить установилось ли, прописываем в терминале команду » sass —version «.
Как видите установка через path очень простая, особенно в linux, также можно было через npm, я его не стал рассматривать, так как для этого надо скачивать node js, но не всем он нужен и в linux его достаточно трудно установить.
Могу ещё порекомендовать скачать программу koala , для более удобной работы с SASS, она есть как на Windows, так и на Linux.
Подробная установка Sass/Scss
На сегодняшний день, разработчики имеют огромный список инструментов-помощников. Одним из них является Sass. В этой записи я подробно распишу что это такое, для чего его используют и как вам лично начать им пользоваться.
Если вы уже знакомы с Sass/Scss, установили его и готовы начать пользоваться им, то вы можете прочитать вот эту запись — «Основы Sass/Scss». В ней я описываю все тонкости препроцессора, а так же как правильно пользоваться им.
Что такое Sass?
Sass — это разновидность препроцессора, который поможет вам во время разработки front-end части. Факт в том, что CSS файлы становятся все больше и больше и через некоторое время с ними становится сложнее работать.
Sass был создан для того, чтобы решить эту проблему. Используется простой синтаксис (который почти полностью схож с обычным CSS), но при всем при этом добавлено много разных возможностей.
Например, чтобы не прописывать одно и тоже свойство несколько раз, можно создать один элемент и далее уже подключать этот элемент к другим классам, а так же много другое. Это лишь маленькая часть того, что можно делать.
Как установить Sass?
Чтобы начать использовать 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 . Если у вас все равно ничего не показывает, то повторите процесс установки с самого начала и после чего вернитесь снова сюда.
Применяем Sass в работе
Для начала давайте создадим простой файл, который будет называться style.scss и внутри мы напишем следующее:
Обратите внимание, что формат файла .scss, а не .css. Для .scss используется немного другой синтаксис, но он элементарный и вполне понятный с самого начала (если вы раньше когда-либо использовали css). А если вы читаете эту статья, я ожидаю, что вы уже знакомы с ним.
И так продолжим с style.css:
- Откройте Windows консоль, с помощью cd команды вам нужно переместиться в папку с Ruby, которая называется bin , (выше я уже описывал как это можно сделать)
- Внутри консоли пропишите sass —watch и далее перетащите файл style.scss в консоль и она автоматически вставить путь до style.scss файла и уже после нажмите Enter.
В итоге должно получиться примерно так же как показано на скриншоте выше.
PS. Конечно же у вас папки и путь могут различаться. - После ввода команды из второго этапа, на экрана у вас должно появиться что-то похожее на это:
Это будет означать, что 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. Внимательно проверьте файл и попробуйте скомпилируйте заново.