Sass и Zurb Foundation-запутанные инструкции по установке

при установке gem, все правильные файлы Foundation установлены для вас в кэше gem. Компас вытащит все файлы F4 SCSS в ваш проект через директиву @import из foundation.scss.

документы проекта в репозитории Github показывают последнюю компас инструкции по созданию вашего проекта F4. https://github.com/zurb/foundation/blob/master/docs/sass.html.erb

похоже, вы смешиваете Автономной инструкции в КОМПАС.

если вы запустили это:

[sudo] gem install compass
cd path/to/where-you-want-your-project
run compass create <project-name> -r zurb-foundation --using foundation

вам не нужен Github или автономные инструкции.

шаги ниже описывают ручные шаги построения проекта F4. Я думаю, вы застряли на Шаг 4, так что сосредоточьтесь на этой части.

Шаг 1:

загрузка для легкого доступа к этим двум архивам:

Ваниль:

http://foundation.zurb.com/files/foundation-4.1.6.zip

Foundation Master:

https://github.com/zurb/foundation/archive/master.zip

CD в своем www корневую директорию:

Шаг 2:

создать этот файл:

/ config.rb

require 'zurb-foundation'
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "img"
javascripts_dir = "js"
output_style = :expanded
relative_assets = true
line_comments = true

переключатель output_style = :compact or :compressed и line_comments = false на производства (когда буду жить).

Шаг 3:

• Скопировать/Переместить index.html С Фонд Ванили в корневой каталог www.
• редактировать line 11, и foundation.css to app.css в теге style.

Шаг 4:

создайте этот каталог и файл:

/ scss/

• создать app.scss - это ваш сайт/приложение таблицы стилей, и мы будем импортировать Normalize и F4 в нем.

• скопируйте в него следующее:

  // Global Foundation Settings
  // @import "settings";
  
  // Comment out this import if you don't want to use normalize
  @import "normalize";
  
  // Comment out this import if you are customizing you imports below
  @import "foundation";
  
  // Your own SCSS here...
  

если вы хотите переопределить некоторые переменные F4 SaSS вам понадобятся . Пока я бы пропустил этот шаг и оставил его прокомментированным, пока вы не будете более знакомы с Ф4.

Шаг 5:

создайте этот каталог (файлы, автоматически записанные здесь):

/ css/

• app.css - будет написано здесь /scss/app.scss на компас. Нормализуйте, и все F4 CSS будут внутри него, плюс любой из ваших собственных CSS, которые вы добавили.

это происходит автоматически, вам не нужно ничего делать, кроме установки необходимых драгоценных камней и конфигурации компаса файл Шаг 2.

Шаг 6:

создайте этот каталог и скопируйте / переместите в него эти файлы:

/ js/

• Скопировать/Переместить /js/foundation.min.js С Фонд Ванили скачать тут.

• Если вам нужен свой собственный app.js создать / разместить его здесь и связать с ним последний в вашем футер.

/ js / поставщик/

• Скопировать/Переместить /js/vendor/custom.modernizr.js С Фонд Ванили скачать здесь.

• Скопировать/Переместить /js/vendor/zepto.js и /js/vendor/jquery.js С Фонд Ванили скачать тут.

позже, когда вы почувствуете себя более комфортно, вы можете выбрать отдельные файлы JS Foundation из Foundation Master и объединить их в меньший lib здесь как foundation.min.js.

это должно сделать это.

проверьте этот файл в my www repo, поскольку он показывает рабочую настройку F4: https://github.com/jhauraw/jhaurawachsman.com/blob/master/_layouts/default.html

вы также можете совать туда, как интегрировать хрюкать.js для автоматизированного построения SCSS и JS с конкатенацией и minification: https://github.com/jhauraw/jhaurawachsman.com/blob/master/Gruntfile.js