Как настроить prepros css

Sass (which stands for Syntactically Awesome Style Sheets) is an extension of CSS that enables you to use things like variables, nested rules, inline imports and more. There are multiple implementations of Sass.

Dart-Sass

Dart Sass is the primary implementation of Sass, which means it gets new features before any other implementation. Prepros uses Dart-Sass by default to compile files.

Node-Sass

Node-Sass uses LibSass, the C implementation of Sass to compile files. You can enable Node-Sass from Project Settings -> CSS Tools -> Sass.

Ruby-Sass

Ruby-Sass is the deprecated Ruby implementation of Sass. Prepros doesn’t support Ruby-Sass.

Configuring Sass

You can configure Sass from Project Settings -> CSS Tools -> Sass.

Change Output Destination

Click the output path on the file options sidebar to manually change the output path of a file. You can also use project wide output options to adjust output path for all Sass files.

Source Maps

Enable the SourceMap option to create a sourcemap ( .map ) file along with the output CSS file. SourceMap files allow you to find the original position of rule sets and properties in the Sass file while inspecting pages with developer tools.

Source Comments

Enable the Source Comments option to output comments in the CSS file containing the file name and line number of a rule set in the input Sass file. Dart Sass doesn’t support source comments.

Precision

Use the Precision option to set how many digits after the decimal will be allowed. For instance, if you have a decimal number of 1.23456789 and a precision of 5, the result will be 1.23457 in the final CSS. This option is only available with Node-Sass, Dart-Sass always uses 10 digit precision.

Читайте также: Анкетка орг не работает

Output Style

Use the Output Style option to set the format of the output CSS file. Output Style option is only available with Node-Sass, Dart-Sass outputs expanded CSS by default.

Nested — Nest rule sets.
Expanded — Separate rule sets and properties with a new line. Makes it easier to read and debug.
Compact — Output one rule set per line.

Indent Type

Use the Indent Type option to indent output CSS with spaces or tabs.

Indent Width

Use the Indent Width option to set the number of spaces or tabs to use while indenting output CSS.

Prefix CSS

Enable the Prefix CSS option to add vendor prefixes to the output CSS file with Autoprefixer.

Minify CSS

Enable the Minify CSS option to minify the output CSS file.

Imported Files

Prepros compiles the parent file whenever you edit an imported file. Prepros also re-scans imported files whenever you edit a file. Refresh project with CTRL+R or CMD+R to manually re-scan imported files.

For instance if you have a file called a.scss with the following imports.

Prepros will process a.scss whenever you edit b.scss , c.scss or d.scss .

Import Globbing

You can optionally enable import globbing from Project Settings -> CSS Tools -> Sass. This option allows you to import multiple Sass files with a glob pattern.

This will import all .scss files in the hello folder in the alphabetical order.

Issues with Globbing

Even though globbing makes it easier to import a lot of files, I would not recommend it. CSS relies on the order of selectors for specificity and importing all Sass files in the alphabetical error can lead to subtle issues related to specificity. Source-maps also won’t work if you use globbing.

Sass Frameworks

Bourbon, Neat and Susy

You can can use Bourbon, Neat, Susy after installing them with NPM

Compass

Compass is deprecated and very old. Prepros doesn’t support Compass. I recommend Bourbon instead.

Источник

Prepros: open-source компилятор файлов для front-end разработки

Здравствуйте, уважаемые Хабражители.

Данная статья посвящена фантастическому, на мой взгляд, open-source приложению Prepros, которое может облегчить рабочий процесс многим фронт-энд разработчикам.

Prepros умеет компилировать файлы LESS, Sass, SCSS, Stylus, Jade, Slim, Coffeescript, LiveScript, Haml и Markdown, минифицировать и объединять в один JavaScript-файлы и это еще не все.

Под катом — более подробный обзор приложения.

Возможности Prepros

Возможности приложения перечислены в информации о проекте на GitHub:

компиляция файлов less, sass, scss, compass, coffeescript, stylus, jade, slim, markdown, haml и livescript;
приложение не зависит от того, установлены ли в системе соответствующие программы и библиотеки (sass, compass и т.п);
возможность оптимизировать изображения;
обновление страниц в браузере в реальном времени;
минификация и объединение файлов JavaScript;
отслеживание директив import;
гибкие настройки;
система вывода ошибок и оповещений (логов);
встроенный http-сервер.

Создание http-сервера производится с целью просмотра проекта с различных устройств по установленному адресу; при таком просмотре поддерживается возможность LiveReload’а — обновления проекта в браузерах всех устройств в реальном времени.

В настоящее время существуют версии приложения для Windows и MacOS, также имеется расширение для Google Chrome, обеспечивающее возможность LiveReload. В планах — аналогичное расширение для FireFox.

Обзор интерфейса

Приложение выполнено в современном flat-стиле; приложение можно свернуть в трей, что удобно.

Интерфейс приложения, по сути, прост и интуитивно понятен. Слева в сайдбаре выводится список ваших проектов, центральная часть отведена на список файлов, справа находится меню для работы с отдельным файлом.

Сверху справа — меню глобальных настроек приложения.

В левом сайдбаре внизу — меню работы с проектом, позволяющее настроить проект: папки, в которые по умолчанию компилируются файлы соответствующих типов, параметры создания http-сервера, а также переход в меню оптимизации изображений.

Для каждого файла можно разрешить/запретить автокомпиляцию, скомпилировать вручную, а также указать параметры компиляции.

При активированной опции автокомпиляции после каждого сохранения файла программа выводит информацию о проведенной обработке файлов:

Источник

Многоязычная предварительная обработка с Prepros

В современной веб-разработке первичная обработка играет значительную роль. Языки предварительной обработки, также известные как препроцессоры, делают написание HTML, CSS и JavaScript быстрее, проще и гибче. Но прежде чем мы сможем их использовать, нам нужно установить и настроить их на наших машинах.

Это не имеет большого значения, когда мы используем только один, например CoffeeScript. Но часто наш проект требует объединения нескольких препроцессоров, и тогда все может стать немного сложнее. Нам нужно установить все необходимые языки и правильно настроить их для компиляции наших файлов. Конечно, это означает дополнительную работу. К счастью, существует гораздо более простое решение — решение «все в одном».

Prepros , созданный Subash Pathak , — это инструмент, который может автоматически обрабатывать все наши потребности в предварительной обработке. Это GUI-компилятор с открытым исходным кодом, похожий на CodeKit, для предварительной обработки языков, таких как LESS, Sass, Compass, Stylus, Markdown, CoffeeScript и так далее. С Prepros многоязыковая предварительная обработка больше не является проблемой. Он работает как на Win, так и на Mac, и с момента его первого выпуска 1 мая 2013 года он активно развивался, регулярно добавляя новые функции.

Звучит хорошо? OK. Давайте кратко рассмотрим, что Препрос может сделать для нас.

Характеристики и преимущества

Ниже вы можете найти описание всех интересных функций и преимуществ, которые Prepros предлагает на момент написания этой статьи:

Многофункциональное многоязычное решение. Prepros может скомпилировать самые популярные на сегодняшний день языки предварительной обработки. К ним относятся: LESS, Sass, SCSS, Compass, CoffeeScript, LiveScript, Stylus, Jade, Slim, Markdown и Haml.
Нет зависимостей. Просто установите Prepros и все готово. Больше ничего не нужно устанавливать или настраивать. Не возиться в командной строке. Просто запустите приложение и начните работать. Достаточно просто.
Гладкий и простой, но мощный графический интерфейс. Прощай, командная строка 🙂
Несколько уровней настройки. Вы можете настроить Prepros глобально для всех проектов, особенно для каждого отдельного проекта и индивидуально для каждого файла. И каждый файл может быть вручную или автоматически скомпилирован в зависимости от ваших потребностей.
JavaScript минификация и конкатенация. Prepros может минимизировать и объединять ваши файлы JavaScript в режиме реального времени, когда вы изменяете файлы в редакторе.
Оптимизация изображения. Prepros может оптимизировать изображения PNG, JPG и GIF одним щелчком мыши, чтобы ускорить время загрузки страницы и повысить общую производительность сайта.
@imports Prepros отслеживает изменения ваших файлов и компилирует их на лету.
Встроенный http-сервер. Prepros имеет встроенный статический http-сервер в один клик, чтобы проверить все ваши вещи без ограничений на URL файлов.
Обновление браузера в реальном времени. Prepros может обновлять ваш браузер каждый раз, когда вносятся изменения в ваши файлы. Эта функция работает в Firefox, Chrome, Opera и IE10, если вы используете встроенный http-сервер, но для использования пользовательского URL-адреса сервера или файла необходимо установить расширение для браузера.
Многофункциональное обновление в реальном времени. Prepros поддерживает тестирование ваших веб-страниц на нескольких устройствах, подключенных к вашей сети. Он обновляет все браузеры и устройства всякий раз, когда вы вносите изменения в свои файлы.
Уведомления об ошибках и успехах. Prepros уведомляет вас каждый раз, когда ваш файл успешно компилируется, и всякий раз, когда компиляция заканчивается неудачей, появляется сообщение об ошибке и регистрируется ошибка для легкой отладки.
Это кроссплатформенный (в настоящее время работает на Win и Mac).
Это абсолютно бесплатно и с открытым исходным кодом.

Как это устроено

Первое, что вам нужно, чтобы использовать Prepros, — это иметь проект. Проект — это просто папка, содержащая все ваши файлы предварительной обработки, расположенные в той же папке и / или подпапках. Чтобы добавить свой проект, просто перетащите папку проекта в окно приложения, и Prepros выведет список всех файлов, которые он может скомпилировать.

Когда файл импортируется другим файлом, импортированный файл не отображается в списке файлов, но импортированный файл просматривается в фоновом режиме, а родительский файл компилируется всякий раз, когда в импортируемый файл вносятся изменения. Также вы должны иметь в виду, что после добавления новых файлов в папку вашего проекта или импорта одного файла из другого файла вы должны обновить проект, чтобы увидеть изменения.

После добавления проекта у Prepros есть множество опций, которые вы можете настроить в соответствии со своими потребностями.

Вы можете настроить каждый файл индивидуально. Просто выберите его и отредактируйте настройки на панели, которая появляется в правой части окна приложения.

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

Для глобальной конфигурации вам нужно открыть окно параметров Prepros . Просто нажмите на значок меню в верхнем правом углу окна приложения и выберите « Параметры подготовки» . Здесь вы можете установить параметры, применимые ко всем вашим проектам.

Источник

Как настроить prepros css

УЧЕБНЫЕ МАТЕРИАЛЫ

Установка и настройка Prepros

Установка и настройка Prepros