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

Я решил использовать версию Sass Foundation 4 как CSS, практически невозможно эффективно редактировать сейчас.

Я выполнил следующие инструкции: http://foundation.zurb.com/docs/sass.html

Это посоветовало мне установить драгоценный камень (без проблем), а затем установить компас, а затем создать проект, который я сделал в wwwroot.

Все до сих пор. Затем мы советуем мне "загрузить файлы из Github (захватить scss/и js/directories) и поместить их в каталог проекта"

Теперь, почему в названии рыбы на велосипеде инструкции подскажут мне это сделать, когда предыдущий шаг в командной строке (создание компас -r zurb-foundation - использование основы) создает папку уже в корне каталог моего проекта - хотя и названный по-разному - которые содержат похожие, если не идентичные файлы? Там уже есть папка "javascripts" с подпапками "фундамент" и "поставщик", которые содержат в основном те же файлы, хотя некоторые из них имеют разные размеры.

Я что-то упустил? Вложенный файл "index.html" ссылается на папку "javascripts", поэтому почему я должен включать "js" из github? Это очень запутанно, когда вы новичок в этой технологии!

После выполнения инструкций по установке у меня теперь есть файлы "foundation.scss" и "app.scss" , которые, по-видимому, в основном одинаковы, кроме одного (app.scss), есть много комментариев. Какой из них я должен использовать?

Мне кажется, что инструкции в основном устарели. Похоже, мне не нужно "js" из github, но мне нужно "scss". Содержимое этой папки scss выглядит так, как будто они должны войти в папку "sass", созданную при создании проекта, и файл "foundation.scss" можно удалить, так как "app.scss" является его копией.

Я не знаю, где базовый файл "app.scss" надеется на "@import foundation", поскольку нет никакой "основной" папки, созданной при установке/создании проекта. Может быть, я что-то упускаю, но все это очень запутывает. Может кто-то прояснить, что мне нужно для начала, и что я могу удалить/проигнорировать?

Ответ 1

Когда вы устанавливаете gem, все необходимые файлы Foundation устанавливаются для вас в кеше драгоценных камней. Compass вытащит все файлы FSC SCS в ваш проект с помощью директивы @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 или Standalone.

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

ШАГ 1:

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

Foundation Vanilla:

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

Мастер Foundation:

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 для Production (при переходе в прямом эфире).

ШАГ 3:

Скопировать/переместить index.html из Foundation Vanilla в каталог корневого www.
Измените line 11 и измените foundation.css на app.css в теге стиля.

ШАГ 4:

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

/СКС/

Создать 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, вам понадобится файл _settings.scss. На данный момент я бы пропустил этот шаг и оставил его прокомментированным, пока вы не познакомитесь с F4.

ШАГ 5:

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

/CSS/

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

Это происходит автоматически, вам не нужно ничего делать, за исключением того, что установлены необходимые камни и ваш конфигурационный файл Compass от STEP 2.

ШАГ 6:

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

/JS/

Скопируйте/переместите /js/foundation.min.js из Foundation Vanilla здесь.
Если вам нужен ваш app.js создать/разместить его здесь и связать с ним последним в нижнем колонтитуле .

/JS/продавец/

Скопируйте/переместите /js/vendor/custom.modernizr.js из Foundation Vanilla здесь.
Скопируйте/переместите /js/vendor/zepto.js и /js/vendor/jquery.js из Foundation Vanilla здесь.

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

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

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

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

Ответ 2

Не будучи столь же искусным, как @jhauraw, я заметил что-то еще.

Я установил FOUNDATION через приложение Compass. Будучи новичком в Compass, я тоже искал папку "Foundation", которая содержала бы все файлы Foundation SCSS. И когда я посмотрел на файл _settings.scss, который присутствовал, оказалось, что все было прокомментировано. То, что я знаю, понимает (еще как новичок в компасе), так это то, что файл "фундамент" живет в библиотеке ресурсов в Compass. При необходимости эти файлы импортируются при создании файла CSS. Файл _settings.scss со всеми полями с комментариями является файлом переопределения. Поэтому, если вы удалите комментарии для определенной переменной или mixin, она переопределит оригиналы, скрытые в библиотеке Compass. Скомпилированный CSS, кажется, содержит все необходимое.