RSS

SASS + Compass под Windows: установка, настройка, работа

Начав работать с SASS, столкнулся с ситуацией, когда непонятно с чего начать. Возможно это небольшое пошаговое руководство облегчит кому-то жизнь.

1. Для начала нужно установить Ruby

Берём инсталлер последней версии: https://rubyinstaller.org/downloads/
На этапе установки не забываем отметить пункт Add Ruby executables to your PATH

Add_Ruby_executables_to_your_PATH

2. Теперь нужно установить SASS + Compass

Для этого нужно открыть командную строку и последовательно выполнить следующие команды:

gem install sass
gem install compass

gem_install

3. SASS установлен, теперь нужно подготовить его для работы с проектом

Для этого в директории с нашим проектом необходимо выполнить команду:

compass init

Будет создан файл с конфигом для Compass и директории для файлов SASS и CSS.

compass_init

Теперь нужно отредактировать файл конфига config.rb, прописав там правильные пути к нашим папкам с SASS, CSS, JS и картинками.

Можно просто положить готовый файл конфига в корень проекта, тогда необходимость в использовании команды init исчезает.

4. Всё готово, можно работать.

В директории sass создаём файл/файлы с расширением .scss, в него пишем наш SCSS код.

Для того, чтобы Compass отслеживал изменения в этих файлах, и автоматически генерировал из них CSS, необходимо в корне проекта (там, где лежит файл с конфигом) выполнить команду:
compass watch
compass_watch

Появившееся консольное окно не закрываем до окончания работы с файлами SASS.

5. Profit!

Добавить комментарий

16 комментариев на «SASS + Compass под Windows: установка, настройка, работа»

  1. Кто-то сталкивался с ошибкой после команды gem install sass
    ERROR: Could not find a valid gem 'sass' (>= 0), here is why:
    Unable to download data from https://rubygems.org/ - SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed (https://api.rubygems.org/latest_specs.4.8.gz)

    • ttargus, похоже проблема с сертификатом SSL на rubygems.org, я решил эту проблему так:
      gem install sass --source http://rubygems.org
      gem install compass --source http://rubygems.org

  2. Круто! Мы пишем на RoR на линуксе соответственно, но начальную верстку я делаю на винде(из-за photoshop’a с лицензией), не хватало мне здесь sass очень-очень! теперь буду писать все, как надо, и не придется переписывать больше)))

  3. Здравствуйте. У меня при установке выдает ошибку

    C:\Users\Евгений>gem install sass
    ERROR: Could not find a valid gem ‘sass’ (>= 0), here is why:
    Unable to download data from https://rubygems.org/ – Errno::ECONNREFUS
    ED: No connection could be made because the target machine actively refused it.
    – connect(2) for “api.rubygems.org” port 443 (https://api.rubygems.org/specs.4.8
    .gz)
    Я попробовал решить проблему так:
    gem install sass –source http://rubygems.org

    Но в моей конторе стоит прокси сервер и программа не устанавливается, а выдает ошибку:

    d:\Program Files\Ruby22>gem install sass –source http://rubygems.org
    ERROR: Could not find a valid gem ‘sass’ (>= 0), here is why:
    Unable to download data from https://rubygems.org/ – Errno::ECONNREFUS
    ED: No connection could be made because the target machine actively refused it.
    – connect(2) for “api.rubygems.org” port 443 (https://api.rubygems.org/specs.4.8
    .gz)
    Unable to download data from http://rubygems.org/ – Errno::ECONNREFUSE
    D: No connection could be made because the target machine actively refused it. –
    connect(2) for “api.rubygems.org” port 80 (http://api.rubygems.org/specs.4.8.gz

    Возможно ли как то еще ее установить?

    • В дополнение к выше сказанному в статье.
      !! В адресе на проект не должно быть кириллицы. Иначе ruby не видит куда скомпилиованый css складывать и будет выдавать ошибки.
      Сегодня столкнулся с данной проблемой для Windows 7. Правда ставил не через командную строку, а ставил compass.app для коллеги. Пока в cmd не залез, не понял в чем проблема)) Может кому будет полезно…

  4. Здравствуйте! Скажите пожалуйста, можно ли sass установить на хостинг? Я работаю с файлами напрямую с хостинга по winscp.

  5. Здравствуйте. Я все установил. compass. но когда я пишу команду compass init ничего не появляется… в чем проблема?