Серия уроков по SASS (SCSS) phpStorm. Урок 1 - устанавливаем sass

Это первая статья из серии уроков по замечательному инструменту для верстки сайтов - SASS. SASS - это препроцессор css, то есть программа, которая выполняет предварительную обработку данных. Если проще - это инструмент, который автоматизирует написание кода CSS.

В данном уроке я хочу показать Вам, как устанавливать SASS.

Windows

• Устанавливаем Ruby, для этого переходим по ссылке http://rubyinstaller.org/ и скачиваем последнюю версию (на данный момент это Ruby 2.2.0). После чего устанавливаем его как обычную программу Windows. Отмечаем все галочки при установке.
• Следующий шаг: устанавливаем сам SASS (SCSS). Для этого открываем консоль (жмем клавиши Win+R и вводим cmd). В консоли вставляем

  gem install sass

  Ждем, пока пройдет установка. Чтобы проверить, правильно ли все установилось, пишем в консоли sass-v, если все нормально, то мы увидим версию SASS. Также сразу можно установить COMPASS (статья о SASS и COMPASS обязательно будет =) ), пишем в консоли gem install compass. Вот и все - SASS установлено.

Ubuntu

• Открываем консоль и прописываем:

   sudo apt-get update
  sudo apt-get install ruby-full
  

• Устанавливаем sass

   sudo gem install sass
  

• Устанавливаем compass

  sudo gem install compass
  

Теперь открываем phpShtorm и в своем проекте создаем файл с расширением .scss, например, style.scss, после чего phpShtorm сам покажет сообщение "File Watchers" - жмем по сообщению. Вот и все: scss установлено и подключено.

Обратите внимание, что по умолчанию css код компилируется в той же папке где лежит Ваш scss файл. Чтобы разделить по разным папкам (с соответствующими названиями) ваши css и scss файлы надо зайти в настройки phpShtorm ("File->Settings->File Watchers") и изменить настройки. Для этого в поле Arguments вписываем:

  --no-cache --update $FileName$:$FileParentDir$/css/$FileNameWithoutExtension$.css

где $FileParentDir$/css/ - путь к папке с css. Также в поле Output paths to refresh пишем:

$FileParentDir$/css/$FileNameWithoutExtension$.css

Пример