Awebdesign's Blog

SASS — для чайников — настройка

Posted in CSS, Видео, уроки CSS3 by awebdesign on 18.09.2016

sass_dreamweaver

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

Если не получилось разобраться с программами типа Compass, Bourbon и других, если вы работаете на Windows, если ничего не помогает — хорошая новость! Dreanweaver, начиная с версии 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, как в обычном случае.

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

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

Далее пишем в Command Prompt:
sass —watch sass:css

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

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

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

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

Реклама

Lacoste L!VE fragrance — INK studio

Лучшие flash-сайты 2014!

лучшие флэш-сайты 2014, 24 hours of happy

clouds over Cuba, best flash sites 2014

bear 71, лучшие флэш сайты 2014

Это просто обалденно! Если есть аккаунт в фэйсбуке — подключите его на главной странице сайта, и он сгенерит ВАШ МУЗЕЙ! На принтскрине фотографии меня и моих друзей ).
лучшие флэш сайты 2014, the museum of me

лучшие флэш сайты 2014, Disney New Fantasyland

Ой, это просто до визга. Вот занимаются люди какой-то херней! Но веселой ) По идее как-то можно потом на основе видео сделать свою кавер-версию (не пробовала).
лучшие флэш сайты 2014, Old Spice Music Muscle

лучшие флэш сайты 2014, We Choose The Moon

Moodstream | Getty Images best flash sites 2014

Monoface, best flash sites 2014

Waterlife, best flash sites 2014

Animal Planet Rebrand

Студия дизайна Toch Studio

Японский дизайн и его влияние в мире

Hot Wheels — секретные гонки

Как можно с помощью света и цвета на глазах у изумленной публики разрушить с помощью зеленого монстра реальное здание, запустить скоростную трассу и в конце концов потопить ее? Смотрите Hot Wheels Secret Race Battle!

Hot Wheels Secret Race Battle

Лучшие рекламы мира - световые эффекты

%d такие блоггеры, как: