Статьи

Компилировать и контролировать SASS из Gumby2

Это быстрое сообщение, показывающее, как можно смоделировать и скомпилировать файл CSS веб-приложения с помощью COMPASS, входящего в комплект Gumby2. Автоматически обновляйте ваш основной CSS-файл всякий раз, когда вы меняете ЛЮБУЮ из ваших таблиц стилей SASS. Ницца.

Gumby 2 построен на Sass и сильно зависит от возможностей Compass… Gumby поставляется с скомпилированным файлом gumby.css, который вы можете включить, а затем продолжить писать CSS обычным способом, однако есть несколько зависимостей, которые вам понадобятся установить, прежде чем вы сможете использовать Sass и Compass и раскрыть истинную силу Gumby 2.

Загрузить Gumby2 Gumby2 Демо

1. Настройка Gumby2

Запустите с localhost: 8080 или с такого сервера — обновите css / gumby.css @import для шрифта Google — добавьте http: // вместо // (вернитесь назад, если вы развернете, чтобы он обслуживал https: // и так далее). Если вы запускаете из файла: // raw html, тогда chrome заблокирует любые XHR-запросы.

2. Установите SASS & COMPASS

См. Руководство по установке Gumby2 SASS .

3. Установите модульную шкалу

Модульная шкала является зависимостью Gumby2 — она ​​используется для типографики.

git bash install modular-scale 

gumby2-1

4. Компилировать и контролировать

Вы можете вручную создать файл CSS, набрав это:

 $ compass compile 

gumby2-2

Если вы хотите, чтобы compass автоматически создавал ваш CSS-файл всякий раз, когда вы вносите изменения, введите:

 $ compass watch 

gumby2-3

Внес изменения в пользовательские стили … и вуаля!

Он мгновенно компилирует новый файл CSS на лету, как мы обычно это делаем.

Примечание. Вам не нужно вводить команду compile каждый раз, когда вы можете просто начать с watch, и она зафиксирует любые изменения с момента последнего сохранения.

gumby2-5

Выполнено! 🙂

Некоторые ошибки, обнаруженные во время установки?

произошла ошибка! (ошибка модульной шкалы gumby2)

запустите установку снова …

gumby2-6

Снова ошибка … ой, мне не хватает config.rb! https://raw.github.com/GumbyFramework/Gumby/master/config.rb

gumby2-7

Успех! 🙂