Содержание
Sass (синтаксически удивительные таблицы стилей) — это расширение CSS, которое позволяет вам использовать такие вещи, как переменные, вложенные правила, встроенный импорт и многое другое. Это также помогает упорядочить вещи и позволяет быстрее создавать таблицы стилей. Благодаря внедрению CSS препроцессоров в NetBeans вы сможете автоматически компилировать файлы SASS на лету в своем проекте, поэтому вам не нужно будет запускать команды самостоятельно каждый раз, когда вы вносите небольшие изменения.
В этой статье мы покажем вам, как правильно настроить NetBeans для автоматической компиляции файлов SASS и SCSS в CSS.
Требования
Вам понадобится SASS на вашем компьютере. пререкаться сначала нужно установить Ruby и сделать его доступным по пути в командной строке. После установки Ruby на ваш компьютер вы можете установить sass gem, используя следующую команду в вашем терминале:
gem install sassЕсли у вас уже установлен sass, вы можете продолжить настройку в NetBeans.
1. Доступ к конфигурации
В качестве первого шага перейдите к открытию диалога свойств вашего проекта. Этот диалог позволяет вам конкретно изменять настройки, относящиеся к вашему проекту и хранящиеся в папке nbproject вашего проекта. Для автоматической компиляции файлов SASS в CSS в NetBeans интегрированы так называемые наблюдатели файлов, которые позволяют выполнять некоторые действия при внесении изменений в некоторые файлы. Вам необходимо настроить параметры CSS Preprocessors в вашем проекте, поэтому откройте диалоговое окно свойств, щелкнув правой кнопкой мыши на вашем проекте:
После того, как вы нажмете на свойства, появится диалоговое окно «Свойства проекта», здесь выберите вкладку «Препроцессоры CSS» и нажмите «Настроить исполняемые файлы»:
В качестве следующего шага нажмите «Настроить исполняемые файлы» и перейдите к следующему шагу.
2. Настройте путь к исполняемому файлу SASS
Для автоматического запуска команд компиляции Netbeans необходим абсолютный путь к компилятору sass, так как при установке с Ruby вы можете найти файл cmd пути компилятора sass в C:\Ruby24-x64\bin\sass.bat, Укажите этот путь на входе SASS Path:
Примените или сохраните изменения и выполните последний шаг.
3. Настройте папки SASS для компиляции и вывода пути
В качестве последнего шага вам нужно указать, где находятся файлы SASS, которые будут скомпилированы, и где должны быть сгенерированы CSS-файлы. В этом случае структура нашего проекта следующая:
Таким образом, мы бы зарегистрировали одного наблюдателя, который преобразует файлы в /scss в /css и не забудьте установить флажок «Компилировать файлы SASS при сохранении», так как это будет запускаться каждый раз, когда вы вносите изменения в файлы SASS:
В корневой папке наших проектов есть папка sass, в которой мы будем хранить все файлы SASS. Они будут автоматически скомпилированы в файлы CSS, когда вы нажмете CTRL + S или сохраните файл вручную. Теперь вы можете изменить исходные файлы вашего проекта, и они будут автоматически встроены в CSS, готовые к работе (обратите внимание, что вам нужно будет минимизировать и эти файлы для производства).
