Блог компании "Selection Studio"

Все самое интересное из мира веб разработки

Дружба сплоченная кодом, (SASS+Compass)+Sublime text 2

Я разделил статью на две микро части. Первая я состоит из 5 пунктов, в них мы поэтапно установим и настроим sass. Ну а во второй разберемся с sublime text и необходимыми дополнениями.

SASS+COMPASS

     1. Первое с чего стоит начать – это с установки Ruby, так как SASS работает именно на этой платформе. Скачать инсталятор можно на официальном сайте в разделе “download”.

 

ВАЖНО!!!  Не забудьте поставить галочку на установку ruby path, это нужно для того, чтобы пути к исполняемым файлам Ruby добавились автоматически.


    2. После установки руби переходим непосредственно к sass, для этого надо вызвать консоль (WIN+R команда “cmd”) и написать заветные «gem install sass».

 

ВАЖНО!!! Если у вас вылетает что-то типа «gem не является внутренней или внешней…. и т.д.», то вы все таки умудрились не поставить галочку «Add Ruby executables to your PATH».

    3. Таким-же образом (через консоль) ставим компас, команда для установки  «gem install compass».

 

    4. Теперь, когда все необходимые данные для sass установлены, нужно инициализировать папку с проектом. Для инициализации переходим в директорию папки проекта с помощью команды cd, и уже там прописываем «compass init».

 

После инициализации можно удалить ненужные файлы (print.scss и ie.scss) и переименовать screen.scss в привычный style.scss.

В корне можно заметить файлик config.rg – это ни что иное как конфигурационный файл компиляции проекта, давайте разберемся что он из себя представляет.

 

Строчка 5 «http_path» - данный параметр отвечает за корень файла проекта и по умолчанию равен “/”.

Строчка 6 «css_dir» - директория относительно корня проекта, по умолчанию равен “stylesheets”. Собственно именно туда и будут сливаться наши конечные css файлы.

Строчка 7 «scss_dir» - директория относительно корня проекта, по умолчанию равна “ sass ”. Из этой директории будут браться sass файлы для генерации.

Строчка 8 «images_dir» - директория относительно корня проекта, по умолчанию равна “ images ”. Просто директория с изображениями.

Строчка 9 «javascripts_dir» - бла бла бла, в общем директория со скриптами по умолчанию “javascripts”.

    5. Теперь можно протестировать! Вбиваем в командной строке “compass watch” (при этом находимся в директории с проектом). Compass watch  следит за изменениями в файле «sass» и при любом изменении компилит наш .css

  

Ну что, протестируем sass?!

Введем:

 

Получим:

 

Как видим, все работает идеально, но как-то  не круто и немного громоздко использовать консоль. Так как вы и я, довольно ленивы, давайте попробуем все это дело автоматизировать!

SUBLIME TIME!

Для начала в Sublime должен быть установлен Package Control. Если есть читай дальше, если нет то переходи на по ссылке и копируй данные из вкладки "Sublime Text 2" в консоль редактара (вызов консоли ctrl+ё), ставь и читай дальше =)

Итак, нам нужны такие дополнения как:

  1. SASS Build –думаю по названию понятно зачем он нужен.
  2. SublimeOnSaveBuild – он будет компилировать сразу после нажатия комбинации ctrl+S (сохранения)

Ставятся они очень просто, нажимаем комбинацию "ctrl+shift+p" затем пишем "install package" и нажимаем "enter" и пишим название дополнения которое надо скачать.... ну или в меню sublime "Preferences->Package Control" и т.д.

На этом все, теперь вы можете верстать в несколько раз быстрее, а значит и свободного времени на сон будет больше =)

P.S. Вскоре (если будет время и не сильно лень) сделаем беспристрастный обзор на альфу bootstrap 4. Постараемся узнать что нас ждет нового и вкусного в будущем релизе.

 

Комментарии (1)

  1. Сергей:
    сен 07, 2015 в 20:09

    Полезная статья

Добавление комментариев закрыто.