Меля Крупников

Меля Крупников

Обычный блог представителя человеческой расы, frontend разработчика и просто любителя найти приключений на свою жопу.

Russia, Khabarovsk

Рубрики

post-thumb

Настраиваем компиляцию Sass прямиком из PhpStorm/WebStorm

Веб-разработка · Июнь 22, 2016 в 7:06 пп

Если ты не начинающий веб-разработчик то наверняка знаешь что такое Sass. Если же не в курсе — Google тебе в помощь, и не возвращайся пока не поймешь что жизни удобного и приятного написания CSS без Sass нет.

Я долгое время пользовался костылями по типу Koala и Prepros для компиляции Sass в CSS, но в один прекрасный момент я понял что пора бы уделить немного своего времени и настроить трансляцию из PhpStorm, и начать жить как белый человек. В принципе эта инструкция подойдет и для WebStorm, поэтому не нужно переживать что будут какие-то различия из-за которых вы не сможете справиться с настройкой.

Я готов! С чего начинаем?

установка ruby и sass

 

Первым делом нам нужно скачать и установить Ruby. Ходим на http://rubyinstaller.org, в разделе «Download» находим инсталятор подходящий для твоей разрядности операционной системы и собсно скачиваем самую последнюю версию (на момент написания статьи это 2.3.0). Затем устанавливаем принимая лицензионное соглашение, а так же ставя все галочки!

 

ruby скачать и установить

 

Теперь пришла очередь установить сам Sass. Открываем консоль (сочетание клавиш Win+R, в открывшемся окошке вбиваем cmd, жмем Enter) и пишем команду:

gem install sass

Ждем немного и смотрим наличие строк «Successfully installed sass-3.4.22» (цифры могут быть разными, и зависят они от актуальной версии Sass на момент выполнения тобой этих инструкций) и «1 gem installed». Если строки на месте — Sass встал без проблем.

А я особенный, у меня Ubuntu\Debian!

В таком случае алгоритм практический такой же, за исключением того что ruby установить можно прямиком через apt-get (Название пакета — ruby-full)

 

Sass на месте, теперь PhpStorm настраиваем?

 

настройка sass в phpstorm

 

Создав в проекте файл с расширением .sass или .scss PhpStorm сам предложит настроить «watcher» для этого типа файлов выкинув уведомление где клацнув по «Add watcher» он перекинет тебя в нужный раздел настроек, либо вручную жамкнув File > Settings и в открывшемся окошке перейти в раздел Tools > File Watchers, нажать на зеленый плюсик справа и выбрав Sass\SCSS (В зависимости от того какой стиль написания вам больше нравится).

 

настройка file watchers для Sass SCSS в phpstorm

 

По идеи PhpStorm сам должен подхватить все настройки и нужные директории, но если этого не произошло то перезагрузите его, если и это не помогло то укажите путь до .bat который лежит в папке с установленным Sass в поле Program.

 

настройки scss для file watcher в phpstorm

 

Клацнув по кнопке «OK» можно смело начинать писать код с использованием препроцессора Sass! По умолчанию PhpStorm будет сохранять скомпилированный CSS в той же папке где лежит SCSS\SASS файл.


Надеюсь хоть чем-то помог, в будущем будут еще статьи по автоматизации некоторых рутинных рабочих процессов, оставайтесь на связи. Удачного говнокодинга!

 

 

  • Анастасия Лагодина

    Добрый день! Компиляция происходит дико медленно. Около 3-4 секунд, даже если просто поставить точку. В чем может быть причина? У меня compass scss

    • Меля Крупников

      Это нормально, я например при подключении Bootstrap тоже жду по несколько секунд пока он все скомпилирует. Просто отключайте из компилирования не используемые модули.

      • Анастасия Лагодина

        Мне кажется, просто тогда пропадает весь прикол вотчера. Потому что через консоль получается быстрее.
        А где можно что то отключить из компилирования?