Здравствуйте! Это краткая инструкция по настройке рабочей среды под 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 и получите на выходе в правом поле готовый минимизированный файл.
Ну и видео, чтобы стало еще понятнее:
You must be logged in to post a comment.