Sass, Less и SCSS

1. Установка Sass / SCSS
2. Установка Меньше
3. Компиляция кода в CSS
4. Чтобы создать File Watcher
5. Компиляция кода
6. Настройка подсветки синтаксиса

PhpStorm интегрируется с компиляторами, которые переводят пререкаться , Меньше , а также SCSS код в CSS , Чтобы использовать компилятор в PhpStorm, вам нужно настроить его как File Watcher , Для каждого поддерживаемого компилятора PhpStorm предоставляет предопределенный шаблон File Watcher. Чтобы запустить компилятор в вашем проекте, создайте специфичный для проекта File Watcher на основе соответствующего шаблона.

Прежде чем начать, убедитесь, что у вас есть Node.js на твоем компьютере.

Установка Sass / SCSS

• Во встроенном терминале (Alt + F12) введите:

  npm установить -g sass

  Узнайте больше из пререкаться Официальный веб-сайт.

Установка Меньше

• Во встроенном терминале (Alt + F12) введите:

  Установка npm - меньше глобальных

  Узнайте больше из Меньше Официальный веб-сайт.

Компиляция кода в CSS

Чтобы скомпилировать ваш код на лету, вам нужно настроить компилятор как PhpStorm File Watcher ,

Чтобы создать File Watcher

1. В диалоговом окне «Настройки / Настройки» (Ctrl + Alt + S) щелкните «Просмотр файлов» в разделе «Инструменты». Страница просмотра файлов , который открывается показывает список уже настроенных наблюдателей файла.

2. Нажмите или нажмите Alt + Insert. В зависимости от инструмента, который вы собираетесь использовать, выберите из списка предопределенный шаблон Less, Sass или SCSS.

3. В поле «Программа» укажите путь к исполняемому файлу или архиву компилятора в зависимости от выбранного предварительно определенного шаблона.

   • lessc.cmd для Меньше.

   • sass.cmd для Sass / SCSS.

   Если вы выполнили стандартную процедуру установки с помощью npm, PhpStorm сам найдет необходимые файлы и автоматически заполнит поле. В противном случае введите путь вручную или нажмите и выберите местоположение файла в открывшемся диалоговом окне.

4. Действуйте, как описано в Использование File Watchers ,

Компиляция кода

Когда вы открываете файл, PhpStorm проверяет, доступен ли соответствующий наблюдатель файла в текущем проекте. Если такой наблюдатель файла настроен, но отключен, PhpStorm отображает всплывающее окно, которое информирует вас о настроенном наблюдателе файла и предлагает включить его.

Если в текущем проекте настроено и включено соответствующее средство просмотра файлов, PhpStorm запускает его автоматически после события, указанного в Новый диалог Watcher ,

• Если установлен флажок «Автосохранение отредактированных файлов, чтобы активировать наблюдателя», «Наблюдатель файлов» вызывается, как только в исходный код вносятся какие-либо изменения.

• Если флажок «Автосохранение отредактированных файлов для запуска наблюдателя» снят, «Наблюдатель файлов» запускается при сохранении (, Ctrl + S) или при перемещении фокуса из PhpStorm (после деактивации кадра).

PhpStorm создает отдельный файл с сгенерированным выводом. Файл имеет имя исходного файла Sass, Less или SCSS и расширение .css. Расположение сгенерированных файлов определяется в полях Выходные данные для обновления поля Новый диалог Watcher , Однако в дереве проекта они отображаются под исходным файлом, который теперь отображается как узел.

Настройка подсветки синтаксиса

Вы можете настроить подсветку синтаксиса с учетом Less / Sass / SCSS в соответствии с вашими предпочтениями и привычками.

1. В диалоговом окне «Настройки / Настройки» (Ctrl + Alt + S) перейдите к.

2. Выберите цветовую схему, примите параметры выделения, унаследованные от значений по умолчанию, или настройте их, как описано в Настройка цветов и шрифтов ,

Последнее изменение: 27 мая 2019 г.