Здравствуйте! Это краткая инструкция по настройке рабочей среды под SASS для самых тупых! (вроде меня)

Если не получилось разобраться с программами типа Compass, Bourbon и других, если вы работаете на Windows, если ничего не помогает — хорошая новость! Dreamweaver, начиная с версии CC, работает с SASS без каких-либо проблем! Все так же просто, как и написание обычных css файлов вместе с Дримвивер.

Для начала, конечно, устанавливаем Ruby on Rails для Windows, качаем здесь: http://rubyinstaller.org/downloads/. Кстати — самый простой способ обновить Ruby, это скачать последнюю версию и установить заново.

Далее открываем Dreamweaver CC или выше.

Затем ищем консоль. Нажмите Старт (кнопка Виндоус внизу слева, через которую вы отключаете компьютер), там в поисковой строке наберите Command Prompt — как только начнете набирать — программа высветится в виде иконки — черный экран с белыми буковками C:\_.

Я прилагаю видео-урок, он на английском, но объясню, как это работает. Например, у вас есть проект — какая-то папка на компьютере с файлами. В проекте есть папка css, где вы держите все свои листы стилей. Создайте рядом папку sass, то есть если корень — папка html, то в ней должны быть 2 папки — css и sass. Sass — папка для ваших scss-файлов.

Теперь нужно сказать Ruby, чтобы он следил за папкой sass и все изменения применял к папке css. Если вы создадите файл style.scss, то после генерации листа стилей в папке css появится файл style.css.

Естесственно, в html-файле вы привязываете style.css, как в обычном случае.

Если меняем бутстрап, то нужно скачать файлы для SASS, найти там папку assets/stylesheets и скопировать оттуда _bootstrap.scss и всю папку bootstrap, перенести в свою папку проекта, в созданную папку sass. _bootstrap.scss переименовать в bootstrap.scss, а bootstrap.min.css в папке css переименовать в bootstrap.css. Файлы должны иметь одинаковое название, чтобы изменения писались из сасса в обычный цсс. Command Prompt будет писать:

write css/bootstrap.css

Итак, чтобы попасть в Command Prompt в нужную директорию, сначала нужно туда перейти, так как по умолчанию Command Prompt у вас открывается в C:\Users\Admin. Для этого набираем в черном окошке:
pushd d:\ваш_диск\папка_проектов\проект

Например у меня это выглядит так:
pushd d:\DATA E\2016\sitename

Далее пишем в Command Prompt:
sass —watch sass:css (два дефиса перед watch)

Эта строка так и переводится — сасс —смотри за sass:css.

при условии, что в директории где мы сейчас находимся есть папки sass и css.

И все — октрываем в Дримвивере файлы scss и правим. Если после обновления html-файла в браузере изменений не видно, то откройте Command Prompt и проверьте — возможно, вы сделали какую-то ошибку при написании стилей в scss.

ВАЖНО:

Если нужно конкретно поменять брейкпоинт открытия/скрытия меню, то меняем в файле _variables.scss переменную $grid-float-breakpoint, ставим для нее значение:
$grid-float-breakpoint: $screen-md-min !default;
вместо @screen-sm-min

Так как изменения пропишутся в файл bootstrap.css, и он будет иметь не минимизированный вид, вам нужно будет его минимизировать и сохранить как bootstrap.min.css. Для этого пройдите по ссылке http://cssminifier.com/, скопипастите свой цсс в левое окно, нажмите кнопку Minify и получите на выходе в правом поле готовый минимизированный файл.

Ну и видео, чтобы стало еще понятнее: