Эта маленькая, но ее достаточно для задач для верстальщика программа-сборщик, которая компилирует такие препроцессоры, как SASS, LESS, STILUS и многие другие. Простыми словами превращает форматы в которых быстро и удобно работать в форматы понятные для браузера.
К примеру стили я пишу на языке SASS в синтаксисе SCSS, а prepros автоматически перекодирует в понятный браузеру Css. Также программа сжимаем вес проекта, что повышает скорость загрузки.
Я выбрал эту программу, потому что она очень проста для начинающего мастера по верстки. Мало того что нужно учить HTML, Css,Js, да еще учить как правильно работать со сборщиком проекта например: Gulp. Так не годится. Prepros простая программа с понятным интерфейсом. Кроме компиляции программа запускает локальный сервер, где мы можем наблюдать результат нашей верстки(Live preview), а еще сам нажимает за нас обновить в браузере после каждого сохранение в файле, то есть подключает живое обновление при обновлении файлов, что является хорошим ускорителем в работе. Теперь переходим к установке и настройке программы.
Заходим на сайт и выбираем свой вариант для системы => https://prepros.io/downloads скачиваем программу и устанавливаем на диск. Программа платная, но разработчики никак не ограничивают использование пробной версии ни по времени, ни по функционалу, все что будет отличать неоплаченную версию так это всплывающее время от времени окно с просьбой купить программу.
Установка программы ничем не отличается от установки другого приложения, в итоге мы получаем вот такую замечательную программку.
Теперь перейдем к настройке. Для этого мы нажимаем "бургер" и "App settings".
Здесь мы можем поменять тему на темную, для меня темная тема более приятна для работы. Далее мы заходим во вкладку "Notifications" и меняем значение с 5000 на 500, позже я расскажу зачем я это сделал. Затем переходим во вкладку "Project Defaults", перед нами открывается окно с множеством вкладок. Переходим во вкладку "CSS Tools", выбираем "Sass" и в правом окне спускаемся ниже до заголовка "Output", здесь мы меняем в правом столбике в каждом с "css" на "./css". Сделали это мы для того чтобы наша программа автоматически переводила наши исходники с Sass => css в папке нашего проекта.
Сразу забегая вперед могу сказать, что при помощи препроцессора писать стили куда легче, так как в css нет вложенности, буквально через мгновение я покажу на примере что это значит.
Давайте перенесем наш проект в нашу установленную программу. Если кто не знает как создать проект для нашего будущего сайта переходим по ссылке и смотрим;) Теперь чтобы открыть наш проект в "прямой трансляции" на вашем браузере нажимаем сочетание клавиш "Ctrl + L" и вот наш проект открылся в браузере. Чтобы проверить как работает наша прямая трансляция, переходим в редактор кода(я использую Sublime 3) и пишем какую-нибудь фразу, например я написал "Phil about IT", нажимаем сочетание клавиш "Ctrl+S" для того, чтобы сохранить наш проект и видим, что в браузере произошло преображение - автоматически страница обновилась где мы можем видеть наш текст.
Теперь разберем как подключить препроцессор Scss в программе чтобы это корректно работало. Для этого в нашем проекте создаем папку и называем ее как хотим, я назову ее "# src" в этой папке я создам еще одну и назову ее "Scss" и создам уже текстовый файл с расширением "style.scss" и нажимаем "Enter", выскакивает предупреждение, нажимаем "да" и продолжаем.
Следующий шаг, мы перезагружаем программу редактора кода и "prepros". После перезагрузки мы заходим в редактор кода, открываем наш созданный файл и можем здесь приступить к работе. Сейчас покажу чем же отличается наглядно "scss" и "css". В моем проекте уже есть тег с которым вполне можно работать. Давайте сделаем чтобы при наведении на наш тег, задний фон и текст меняли цвет, а при нажатии появлялся верхний регистр и отступ от каждой буквы, для этого нам помогут псевдо-классы. Заметьте я пишу код не в сss, а в scss файле, после сохранения наш код преобразуется в файл css.
Теперь сравним код в scss и css, глядя на код можно уже сделать выводы, что в css как таковой вложенности нет, все приходится перебирать руками и возвращаться к одному и тому же несколько раз, что очень замедлит наш процесс, в отличии от Scss и prepros который ускоряет его.
Может быть и такое что вы все сделали правильно, но ваши стили не работают, а работает только HTML код. Для этого мы удаляем папку "# src" и удаляем "css". Перезагружаем prepros и меняем путь к файлу "css", у меня выглядит путь вот так "D:\ExampleProps\css\style.css", теперь заходим в Sublime => scss => "Ctrl + s" и видим внизу справа зеленый смайлик, он появляется на мгновение - можно сделать чтобы он оставался подольше или поменьше, за это отвечает наша вкладка "Notifications" где мы меняли с 5000 на 500.
